Hey all,
I’m working to convert my site https://bynomad.com/ to Ghost. I’m creating a custom theme around it and trying to update my fonts to use their source files. Right now I have an asset folder structure that links to fonts that looks like this:
I have my CSS file calling the fonts via this path:
This is working in Safari (note the console errors aren’t related to these fonts)
But not working in Chrome and throwing these 404 errors locating the fonts
Any ideas?
You just uploaded and use .otf formate font… but you need to add other formats also to give support in all browser…
Create Your Own @font-face Kits » Font Squirrel that site might be help you to generate webfonts
Yea ultimately I will need to do that, but the .otf format works in the live version of https://bynomad.com/ in both Safari and Chrome. I feel like it’s a different issue because the console log shows a 404 that’s unique to Chrome, not the file format.
I should mention, I believe it’s due to a trailing slash being appended to the src URL in Chrome vs Safari (see console log screenshots for the 404 errors) ie it’s 404ing on a path that looks like “…regular.otf/”
I retract my rebuttal - you were right themeix! Changed to woff/woff2 formats and it worked.
Thanks a bunch, apologies for doubting!
Thats just how the browser and OS renders the special text…but try to call the .svg format before the .woff format it might fix this.
@font-face {
font-family: 'mainFont2';
src: url('../fonts/Eurostile.eot');
src: local('☺'),
url('../fonts/Eurostile.svg') format('svg'),
url('../fonts/Eurostile.woff') format('woff'),
url('../fonts/Eurostile.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
If you’ve tried accessing those files before they existed then it’s possible Chrome had cached the redirect-to-trailing-slash. Switching to woff would have meant Chrome was accessing a new url which didn’t have a cached redirect.
When you’re testing this sort of thing it’s always worth having Chrome’s dev tools open with the “Disable cache” checkbox checked.
