[Resolved] Imported font not displaying

[dale]

Hello. I’ve imported the font Moonglow and am using CSS and PHP you pointed to in a another question to get it to appear as an option in the customizer. The good news is I found it in the customizer. The bad news is it’s not showing up in the browser after I make the change. i’ve set h1–h5 to Moonglow, but that’s not what’s showing up.

[Tom]

Hi Dale,

Have you used @font-face to set the font up?: https://css-tricks.com/snippets/css/using-font-face/

Make sure your URLs are correct in that snippet, you can test them by adding them to your browser and seeing if it downloads a font file.

[dale]

Yes. I tested the URLs and they download the fonts.

Correction: the svg file isn’t downloading, but I can’t figure out why. It’s in the same location in FTP as the rest of the files.

No caching is being implemented on this site to my knowledge. It’s hosted by GoDaddy, no CDS, and no caching plugins.

[Tom]

Your font-face CSS is broken, you’re missing the second src:

Be sure to copy the code directly from here, then just add the URLs: https://css-tricks.com/snippets/css/using-font-face/

Also, make sure you don’t upload fonts to the generatepress folder, as they will be deleted when you update.

[dale]

Thanks, that fixed it! I’d misunderstood the article and thought the second src was only if one had a second eot file.

And yes, that won’t be the permanent location, I just threw them there because I was close to the folder at the time. Bad practice 🙂

[Tom]

Glad you got it working! 🙂

[Author]

Posts