Unable to load @font-face fonts

Question

My downloaded fonts are not appearing in Chrome. I'm using scss which is compiled to css via gulp.

If I go directly to

http://project-name.localhost/data/fnt/Shermlock.ttf

it downloads the font.

_fonts.scss:

@font-face {
  font-family: 'Fishfingers';
  font-weight: normal;
  src: url("data/fnt/Fishfingers.ttf") format("ttf");
}
@font-face {
  font-family: 'Shermlock';
  font-weight: normal;
  src: url("data/fnt/Shermlock.ttf") format("ttf");
}

Included in main.scss as such:

...
@import "base/fonts";
@import "global";
...

HTML:

...
span {
    font-size: 42px;
    font-family: 'Shermlock', sans-serif;
    text-transform: uppercase;
}
...
.task {
    font-family: 'Fishfingers', sans-serif;
    font-weight: 400;
}
...

Project folder structure:

project-name/
    build/
       index.html
       css/
           main.css <--- compiled scss
       data/
         fnt/
            Fishfingers.ttf
            Shermlock.ttf
    js/...
    sass/
       base/
           _fonts.scss
           ...
       _global.scss
       main.scss

Apache setup:

<VirtualHost *:80>
   ServerName project-name.localhost
   DocumentRoot /Users/myname/Sites/project-name/build
</VirtualHost>

EDIT: looking at network requests, for let's say Fishfingers, I get the correct file as a 200 response:

Request URL: http://project-name.localhost/data/fnt/Fishfingers.ttf

Plugging in this url in the browser downloads the font file.

Response in Chrome Dev Tools:

fon't use system fonts, convert this to woff, and then use that, with the `format('woff')` option. [Here's why](https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385). — Mike 'Pomax' Kamermans, Jun 19 '18 at 22:41

score 0 · Answer 1 · answered Jun 18 '18 at 07:50

0

Try

@font-face {
  font-family: 'Fishfingers';
  font-weight: normal;
  src: url("./data/fnt/Fishfingers.ttf") format("ttf");
}
@font-face {
  font-family: 'Shermlock';
  font-weight: normal;
  src: url("./data/fnt/Shermlock.ttf") format("ttf");
}

answered Jun 18 '18 at 07:50

Muhammad Seerat Awan

70
7

score 0 · Answer 2 · answered Jun 18 '18 at 09:20

As you have rightly pointed out your css files are compiled into the 'main.css', however your path from the css file to the font location is incorrect as you first next to go up one level on the hierarchy. So amend the source url and prepend ../ to make url("../data/fnt/Fishfingers.ttf")

score 0 · Accepted Answer · answered Jun 19 '18 at 02:53

0

The answer is that font face mixin requires format("ttf"); to be written out as format("truetype");.

And format("otf"); would become format("opentype");, etc.

answered Jun 19 '18 at 02:53

user3871

12,432
33
128
268

1

But way more important: don't use ttf / otf at all. Use WOFF instead, because ttf/otf are universal system fonts, and are treated as such. Convert your ttf or otf to WOFF format, and then use those, with `format('woff')` – Mike 'Pomax' Kamermans Jun 19 '18 at 22:40
Can you expand on "and treated as such"? – user3871 Jun 21 '18 at 00:03
[I can](https://stackoverflow.com/a/37091681/740553), in [more than one answer](https://stackoverflow.com/a/36110385/740553) in fact. – Mike 'Pomax' Kamermans Jun 21 '18 at 05:28

Unable to load @font-face fonts

3 Answers3