CODEWITHSUNDEEP
font-face
Charmain
Charmain

Reputation: 1

How do I define font-face ON a HTML page rather than in a stylesheet?

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>

Upvotes: 0

Views: 36

Answers (0)

Related Questions