Can't get font-face to use my font on Wordpress

Question

So I followed several guides on how to install a new font using @font-face. I have added the birch.ttf file to /wp-content/themes/zenon-lite and added the following to my Style.css:

@font-face {
font-family: Birch;
src: url('birch.ttf');}

font-family: Birch, Georgia, Arial, Helvetica, sans-serif;

And for each font-family I have listed Birch as the first option, yet I never get it. Any ideas on why it isn't working?

Edit: It's a stupid error. Replaced font files and it worked ...

You only attachted birch.ttf? What browser are you using? IE for example doesn't support .ttf — SKeurentjes, Oct 24 '13 at 08:39
Google Chrome, can you attach multiple versions to support all browsers? I thought most versions [support ttf](http://caniuse.com/ttf)? — CustomX, Oct 24 '13 at 08:41
Yes, most of them. If you wan't good browsersupport, include them all. — SKeurentjes, Oct 24 '13 at 08:54

score 1 · Answer 1 · answered Oct 24 '13 at 08:37

1

Use absolute path.

For instance,

@font-face {
font-family: Birch;
src: url('http://www.*yourpath*.***/birch.ttf');}

Hope this helps.

answered Oct 24 '13 at 08:37

Nitesh

15,425
4
48
60

Edited it to `src: url('http://www.xxx.com/wp-content/themes/zenon-lite/birch.ttf');`, still no luck :( – CustomX Oct 24 '13 at 08:41
Serious? Are you sure it's not just Georgia you're seeing? ;) – CustomX Oct 24 '13 at 08:49
Wtf, could you post a screenshot? – CustomX Oct 24 '13 at 08:53
I think you need to delete your cache – Nitesh Oct 24 '13 at 09:01
that's Georgia ;) Inspect element on Google Chrome and remove Georgia from the font-family, now you'll the text change to Arial :D – CustomX Oct 24 '13 at 09:02
On my iPhone I see the correct font, but that messes up my text. Going to delete my cache. – CustomX Oct 24 '13 at 09:07
Its 'birch', i removed it and got georgia and then when I removed georgia, i got arial. – Nitesh Oct 24 '13 at 09:09
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/39885/discussion-between-t-thielemans-and-nathan-lee) – CustomX Oct 24 '13 at 09:16

score 1 · Answer 2 · answered Oct 24 '13 at 08:46

1

Have you used the same font format, Can you look into this.

@font-face {
    font-family: 'Birch';
    src: url('fonts/birch.eot');
    src: url('fonts/birch.eot?#iefix') format('embedded-opentype'),
    url('fonts/birch.woff') format('woff'),
    url('fonts/birch.ttf') format('truetype'),
    url('fonts/birch.svg#HelveticaNeue65Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

You need to convert your fonts .http://www.freefontconverter.com/

fonts is a folder where i kept my all fonts :)

answered Oct 24 '13 at 08:46

Dinesh Kanivu

2,551
1
23
55

I added this and an .woff font, still same result :( – CustomX Oct 24 '13 at 08:57
Font [path original](http://www.shanaraeshairdesign.com/wp-content/themes/zenon-lite/birch.ttf), font path using your code for [TTF](http://www.shanaraeshairdesign.com/wp-content/themes/zenon-lite/fonts/birch.ttf) and [WOFF](http://www.shanaraeshairdesign.com/wp-content/themes/zenon-lite/fonts/birch.woff) – CustomX Oct 24 '13 at 09:05
@t.thielemans http://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face read this..and be sure the path is correct..Everything is Perfect – Dinesh Kanivu Oct 24 '13 at 09:09
Are you using Wordpress??? @t.thielemans then u should be very clear where u are keeping the files – Dinesh Kanivu Oct 24 '13 at 09:15
Yes I am using WordPress. Yes the paths are correct. As you can tell by visiting the links I provided, it'll automatically download the font. I'm using Chrome Version 30.xxx – CustomX Oct 24 '13 at 09:18
Updated my question. On the iPhone I can see Birch, just not on Chrome yet, also cleared my cache, etc. – CustomX Oct 24 '13 at 09:21
@t.thielemans `@font-face { font-family: Birch; src: url('http://www.shanaraeshairdesign.com/wp-content/themes/zenon-lite/birch.ttf') format('truetype'); /*src: url('fonts/birch.woff') format('woff'), url('fonts/birch.ttf') format('truetype');*/ font-weight: normal; font-style: normal; } ` this is your code, You have not given path for woff font – Dinesh Kanivu Oct 24 '13 at 09:23
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/39889/discussion-between-t-thielemans-and-deekey) – CustomX Oct 24 '13 at 09:29

Can't get font-face to use my font on Wordpress

2 Answers2