0

I'm trying to use the font-face rule in a style block on a html page, rather than in a style sheet. But it's not working.

My aim in doing this is to improve the load time of the Largest Contentful Paint on the page in question, which I've narrowed down to the image and font being used in the header of the page.

So far I've converted the image to the webp format and the font to the woff format. I've also moved the css related to the font family and image in the header from styles defined in a linked style sheet to styles defined in a styleblock in the head section of the page.

For some reason the image is still loading fine but the font is defaulting to something else. This is in both Firefox and chrome. The location of the font in relation to the page has not changed. The font, the web page and the style sheet are all in the same directory.

So far I've only tested this in a local environment becuase I want it to work right before I go live with it.

I can only find forum posts on defining the font family in css - not specifically in style blocks on a html page.

Can you spot anything wrong in my code?

<style type = "text/css"> @font-face{ font-family:SonsieOne; src: url(SonsieOne-Regular.woff) format('woff'); } #header{ max-width: 100%; height:auto; background-image: url(superspreads-header-4.webp); background-repeat:no-repeat; border-top:2px solid #d9c8ba; border-left:2px solid #d9c8ba; border-right:2px solid #d9c8ba; border-bottom:0px solid } .header-text{ /*margin-top:-145px; for when img in html*/ margin-top:8px; margin-bottom:-15px; padding-left:10px; color:#A6846B; font-family:SonsieOne; font-style:normal; text-align:center; text-shadow: 2px 2px 5px #000000; font-size:333%;} </style>
Improve this question
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
Load 5 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.