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:

[![enter image description here](https://i.stack.imgur.com/6TYFH.png)](https://i.stack.imgur.com/6TYFH.png)