@Font-Face Doesn't Work

@font-face doesn't work

One source of the problem could be if your css is in a separate file that isn't in the root folder. For example, if you keep all of your css files in a 'css' folder, you'll need to modify the font url to be relative to that file, not to the root folder. In this example it would be src: url('../inlove-light-wf.ttf');

Furthermore, not all browsers can use .ttf font files. You have to declare alternative font formats in the @font-face css.

Here's a modified @font-face declaration to get you started. I would also recommend reading more here and here.

@font-face {
    font-family: 'Inlove';
    src: url('inlove-light-wf.eot'); /* IE9 Compat Modes */
    src: url('inlove-light-wf.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('inlove-light-wf.woff') format('woff'), /* Modern Browsers */
         url('inlove-light-wf.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('inlove-light-wf.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face not working

Double period (..) means you go up one folder and then look for the folder behind the slash.
For example:

If your index.html is in the folder html/files and the fonts are in html/fonts, the .. is fine (because you have to go back one folder to go to /fonts). Is your index.html in html and your fonts in html/fonts, then you should use only one period.

Another problem could be that your browser might not support .eot font-files.

Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.

Edit: Forget the .eot part, I missed the .ttf file in your css.

Try the following:

@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}

@font-face won't work for my ttf file. Won't load properly

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:

1. putting all the font files in the root directory (the same place you put your homepage)
2. putting the @font-face in a new file called font.css in that same directory
3. 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

1. make sure you use different formats for full support
2. make sure your formats are correct
3. check your syntax with a validator
4. check the file paths are correct

@font-face not loading font

Internet Explorer uses the version .woff of the font, which is not used by you in the code, instead of using the version .eot. I used the @font-face generator tool from fontsquirrel to get all the different font variations

The output should look something like this:

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

@font-face is not working for CSS with correct format, generation, and directory path

I found out what was the issue:

@font-face {
  font-family: "Sevastopol_Interface";
  src: url("Fonts//Sevastopol-Interface//Sevastopol-Interface.ttf");
}

The issue is that my path was not quite right. Backslashes are indeed correct but I needed two of them instead of one as I am on a windows machine. Not something like linux where you would only need one. Thanks to @Syed Muhammad Moiz and @Kusal Darshana for leading me to that conclusion.

Font face doesn't load all fonts

How are you calling the font elsewhere in your CSS? Your @font-face rules look correct. The browser will only download the font files it needs after parsing the CSS. If you were to use the following style rules, all the font weights would be downloaded:

h1 {
  font-family: 'Atlas Grotesk';
  font-weight: bold;
}

p {
  font-family: 'Atlas Grotesk';
  font-weight: normal;
}

.heading {
  font-family: 'Atlas Grotesk';
  font-weight: 100;
}

It sounds like you might have set a global font weight, such as 100, that is preventing the other font weights from being set. Additional context might be helpful in this instance.

Why my STYLE to import external font-face doesn't work

Link you provided doesn't support HTTPS, so if your site have HTTPS connection and headers which restrict access to unsecured HTTP it's can be the problem.

Also, OpenType isn't so suitable for web now, you can use WOFF or WOFF2 version of the same font. I found one here: https://github.com/dreampulse/computer-modern-web-font. Use it like this:

@font-face { font-family: 'Computer Modern Typewriter'; src: url('cmuntt.eot'); src: url('cmuntt.eot?#iefix') format('embedded-opentype'),   url('cmuntt.woff') format('woff'),   url('cmuntt.ttf') format('truetype'),   url('cmuntt.svg#cmuntt') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Computer Modern Typewriter'; src: url('cmuntb.eot'); src: url('cmuntb.eot?#iefix') format('embedded-opentype'),   url('cmuntb.woff') format('woff'),   url('cmuntb.ttf') format('truetype'),   url('cmuntb.svg#cmuntb') format('svg'); font-weight: bold; font-style: normal;}
@font-face { font-family: 'Computer Modern Typewriter'; src: url('cmunit.eot'); src: url('cmunit.eot?#iefix') format('embedded-opentype'),   url('cmunit.woff') format('woff'),   url('cmunit.ttf') format('truetype'),   url('cmunit.svg#cmunit') format('svg'); font-weight: normal; font-style: italic;}
@font-face { font-family: 'Computer Modern Typewriter'; src: url('cmuntx.eot'); src: url('cmuntx.eot?#iefix') format('embedded-opentype'),   url('cmuntx.woff') format('woff'),   url('cmuntx.ttf') format('truetype'),   url('cmuntx.svg#cmuntx') format('svg'); font-weight: bold; font-style: italic;}

Font-face not working at all

Just added more extensions of font, like .ttf and .woff. Now it's working perfectly, but don't know why .otf doesn't work at all. Cheers!

@font-face
{
    font-family: KlavikaLT;
    src: url('fonts/KlavikaLT.otf') format('opentype'),
         url('fonts/KlavikaLT.ttf') format('truetype'),
         url('fonts/KlavikaLT.woff') format('woff');
}

---

Related Topics