I am answering this again, because I feel like I must get to the bottom of this problem!
Here is a checklist on why your @font-face might not work.
You are using ttf files only
Some browsers support .ttf files. Some browsers support .otf files. Some browsers support .woff files. Some browsers support .woff2 files.
So you will need to specify multiple files. Like this:
@font-face {
font-family: "font name";
src: url("font.eot") format("embedded-opentype"),
url("font.woff") format("woff"),
url("font.woff2") format("woff2"),
url("font.ttf") format("truetype");
}
If you do not have all these font files, you can convert them using a font converter of your choice. (do not forget, though, that you will need permission from the font owner to do this)
Here is a rough table for support for font types:
ttf/otf woff/woff2 eot
-------------------------------------
Chrome ● ●
Firefox ● ●
IE ○ ● ●
Opera ●
Safari ●
● = supported ○ = partial support
Also, you should put them in this order:
- eot
- woff/woff2
- ttf/otf
Make sure your file formats are correct
So make sure that the .ttf files have a format of “truetype”, and .of files have a format of “otf” etc.
Also, make sure that the file extentions are correct, because that will stop it from working.
Make sure your syntax is correct
Check your syntax. Also you should put it through a validator to make sure everything’s perfect.
Make sure your file paths are correct
Of course, check your console to see if there are any 404 errors. If there are none, then they should be correct.
Also, I often have problems with file paths. They load, but they just don’t show up. I often solve this by:
- putting all the font files in the root directory (the same place you put your homepage)
- putting the
@font-facein a new file called font.css in that same directory - linking to this file using
@import "font.css"in your main stylesheet
I’m not sure why, but it just seems to work…
TL;DR
- make sure you use different formats for full support
- make sure your formats are correct
- check your syntax with a validator
- check the file paths are correct
