Fastest way to load a web font for a website? - html

Question

My HTML website will use the font Open Sans, and I'm wondering what is the best way to load the font while keeping the website really fast?
Using google fonts in the html: <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
Using google fonts in the CSS: #import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
Downloading the font from the serveur in the css:
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
Something else?
Thanks!

Answer 1

2020 Way of Google Font loading.
If you want copy and paste solution, go ahead.
<!-- [STEP #1] -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- [STEP #2] -->
<link rel="preload" as="style" href="FontUrl&display=swap" />
<!-- [STEP #3] -->
<link rel="stylesheet" href="FontUrl&display=swap" media="print" onload="this.media='all'" />
<!-- [STEP #4] -->
<noscript>
<link rel="stylesheet" href="$CSS&display=swap" />
</noscript>
If you wanna know what is happening, here's the steps with a small explanation.
Preconnect to the google font origin. It help pages load faster by
telling the browser what assets it'll need in the future.
Preload font files. This ensures they are available earlier and are
less likely to block the page's render, improving performance.
Remember "display=swap" is important to score on google pagespeed
insight.
Apply css on load function. Ask the browser to load the CSS
asynchronously with the print context but as soon as the CSS file is
loaded then apply it to the all context.
Fallback if Javascript is disabled in the browser.

Answer 2

It really depends on how fast your own server is though. If your server is quite fast, of course I would prefer 3rd method:
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
However, if your server is really quite slow, then the 1st or 2nd method would be faster, as in was my case.
One very effective way of checking which is faster is to go to this website called pingdom. From there, you enter your webpage URL and then it would show how much time it took for each file to download.
You can see all your font files there as well, and how long it took for each one to download. Try using all 3 different method and find out which is the fastest through Pingdom.

Answer 3

The fastest way to do it is not to do it at all ;)
In your case the best options is to load it from google cdn and hoping your users already have it cashed from previous visit of a page using it.

Answer 4

I'd expect the fastest to be loading it from your own server using #font-face because there are less DNS lookups, and your server is probably under less load than Google's.
If you want it to load fastest you can inline the #font-face attribute to the head of your document, however I would recommend leaving it in the stylesheet.
Although, if you're willing to use some javascript, this looks like the fastest way I can find.

Answer 5

Well all the three ways are fine but when it comes to page load the third way will be perfect. As you will keep everything on local and no need to make multiple calls.
#font-face {
font-family: 'MyWebFont';
src: url('font/myfont.woff2') format('woff2'),
url('font/myfont.woff') format('woff');
}
This is perfect because in first method obviously you are calling fonts from different server it will increase load time and in second method multiple calls will happen so the third way would be perfect.