Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

4
  • When used in html, the relative url is relative to the page, try adding '/' in front of the url. Commented Feb 10 at 18:39
  • Thank you so much for your suggestion. It worked. I had to add './' to the url of the font. I do find this a bit peculiar though because I didn't have to do the same for the image and that is the same distance from the page as the font! Commented Feb 10 at 20:40
  • Keep in mind you're also quite likely need subpages like "www.your-domain.com/contact/". CSS would search in "www.your-domain.com/contact/" for the font file instead of the root directory of your domain. Frankly I doubt you'll get a significant performance boost by moving the font-face rules to an inline CSS. I'd rather recommend to optimize the font loading e.g by preferring more compact formats like .woff2, reducing the total amount of font-families or checking/optimizing your server-side caching settings etc. Commented Feb 11 at 1:15
  • Hi, the performance boost was quite significant actually. By moving the font-face rule to in-line the Largest Contentful Paint fell from 3.5s to 2.2s... I did convert the font in question to .woof2 but, in this instance, that format turned out to be larger than the .woof format... It's not a wordpress site so I'm not sure how to check the server-side caching settings but I am aware, via an auditing tool I use, that in terms of loading the page the server response time is 0.3 seconds which I'm very satisfied with. Commented Feb 11 at 6:29