Custom font working in Safari but not Chrome

Hey all,

I’m working to convert my site 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… that site might be help you to generate webfonts

1 Like

Yea ultimately I will need to do that, but the .otf format works in the live version of 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!