Adding custom fonts through Less

sage
1

I’m basically trying to enable custom fonts using @font-face

@font-face {
	font-family: ViolentElegance;
	src: url('../wp-content/themes/drakkar2/assets/fonts/ViolentElegance.ttf');
	src: url('../wp-content/themes/drakkar2/assets/fonts/ViolentElegance.ttf')  format('truetype');	
}

However, I can’t figure out in which .less file I’m supposed to put that bit of CSS in - I’ve tried variables.less and app.less, and still the font refuses to load on non local browsers. Any insight into my problem would be golden! Thank you!

2

Currently the only fix I’ve been able to implement is adding the css inside a tag in head.php in the theme’s root folder. Which…seems kinda wrong. T_T

3

Have you uploaded the font to the server? may explain why it loads locally :wink:

1 Like
4

Yes, the font does exist on the server : http://gersande.com/wp-content/themes/drakkar2/assets/fonts/ViolentElegance.ttf

5

I looked at your website, appears the font is loading fine with the inline styling on the h1,h2 etc…you resolve your issue?

6

As I wrote above in the second post:

Currently the only fix I’ve been able to implement is adding the css inside a tag in head.php in the theme’s root folder. Which…seems kinda wrong. T_T

7

This is a relative filepath issue. ../ means start one folder up, whereas / means start at the root.

So you either need to drop the .. for root relative, or drop the wp-content/themes/drakkar2/assets/. In future checking your console would probably help.

1 Like
8

The fixes you suggested did not resolve my error. After a lot of grumbling, I’m sticking the css in head.php and sighing a lot.

9

Use src: url('../fonts/ViolentElegance.ttf'); anywhere in your styles (assuming your CSS is compiled to assets/css/ and your fonts are in assets/fonts/)

10

I only see your @font-face declaring a TTF font. Some browsers may not render that so consider using http://www.fontsquirrel.com/tools/webfont-generator to generate a complete @font-face package (or FontPrep if you prefer to do that locally).

I also see multiple rules for the font which are both causing 404 errors.

Towards the beginning of your LESS/CSS I see

@font-face {
	font-family: ViolentElegance;
	src: url('../wp-content/themes/drakkar2/assets/fonts/ViolentElegance.ttf');
	src: url('../wp-content/themes/drakkar2/assets/fonts/ViolentElegance.ttf') format('truetype');
}

and towards the end I also see

@font-face {
	font-family: ViolentElegance;
	src: url('wp-content/themes/drakkar2/assets/fonts/ViolentElegance.ttf');
}

Remove one of these because you only need to declare the font once and it’s probably confusing you.

../ means “go one directory up from the current directory this file is in” as @ben alluded to. Here is some brief info on absolute/relative URL structures which you should definitely peruse.

Your one final @font-face declaration should probably look more like this (though it should also contain more src rules/formats for wider browser support) assuming the two points @ben assumed:

@font-face {
	font-family: ViolentElegance;
	src: url('../fonts/ViolentElegance.ttf');
}