I am experiencing an issue where my downloaded fonts are not showing up in Chrome. I am utilizing scss which gets compiled to css using gulp.
If I directly visit
http://project-name.localhost/data/fnt/Shermlock.ttf
I can successfully download 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 follows:
...
@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: Upon inspecting network requests, for example with Fishfingers, I am receiving the correct file with a 200 response:
Request URL: http://project-name.localhost/data/fnt/Fishfingers.ttf
Pasting this URL into the browser triggers the download of the font file.
Response in Chrome Dev Tools: