CODEWITHSUNDEEP
htmlcssfont-face
foxer
foxer

Reputation: 901

Best method to load web fonts in case of caching and load time

There are several ways to embed a font on your web app.

Method A) Use google fonts CDN like this (in HTML):

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

Method B) Use your custom font like this (in CSS): 

@font-face {
  font-family: "Open Sans Regular";
  src: url(../../fonts/OpenSans-Regular.ttf) format("truetype");
}

Method C) Convert your font to base64 string and use it like this:

@font-face {
    font-family: 'Open Sans Regular';
    src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAQeYABIAAAABv1gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAEHfAAAABwAAAAcaMGk4EdERUYAAOeAAAAAHQAAAB4AJgOxR1BPUwAA6XgAMk1MYsAAAAAyehMTA==) format('woff');
    font-weight: normal;
    font-style: normal;
}

Let's say I have 10 iFrames inside my web app and each one uses multiple fonts.

What are the pros and cons of each method for using inside the iframes?

If I want the best method for caching and load time which one do you recommend? I don't want that micro-moment that fonts are not loaded and the fallback fonts are used by the browser.

Note: Using Method C I can put all the fonts inside one CSS file and link it to each iframe.

Upvotes: 1

Views: 794

Answers (1)

Random COSMOS
Random COSMOS

Reputation: 250

Using a CDN for delivering your static files such as CSS, JS, images, and other files are commonly preferred. This is because once your files are cached on the CDN's edge servers, your site visitors will be delivered static content from the closest point of presence (PoP) instead of the origin server.

In the majority of cases, this shortens the distance between the client and the server and thus helps improve loading times without adding any additional HTTP requests. This also helps in other areas such as increasing redundancy, taking a load off the origin, etc. Source

But it also depends on your site! As Craig Buckler writes on sitepoint

CDNs are an incredibly useful resource but remember to consider the consequences. In practice, most sites will benefit if they load jQuery, the HTML5 shim, and font files from a public CDN. For busier sites, the speed improvements and cost savings of a private CDN are hard to ignore.

Upvotes: 1

Related Questions