Loading of fonts into the websites and web applications is one of the key things in the area of web development. The reason behind this is because the issues like fonts are not properly loading, font taking too much time to load are critical when developing websites or web applications. So you have to careful while loading the font into the website. There is a lot of ways from which you can load the font in 2019. Here we will discuss the best way among them to load the font to your website. These are the four key points you have to remember while adding the fonts to the website.
1) Download the font as WOFF2
Here is the google repository from which you can download the font as WOFF2 format: https://google-webfonts-helper.herokuapp.com/fonts/montserrat?subsets=latin. We are importing Montserrat font so we are downloading that font. If you want to import another font in your project than you a select that particular font from the sidebar. There are a wide variety of fonts available there.
2) add link <rel=”preload”> while importing font in HTML
Preload attribute if link tag specifies the resources that you need very soon after page load before the browser starts its main rendering. After Downloading that font you can place that folder in your localhost project on the server. After placing the font data into your project you have to import particular font file into HTML. Here we are importing two font type that is regular and bold so we will import two types in HTML as shown below:
3) add @font-face declaration with font-display: swap
font-display: swap property allows us an extremely small block period and an infinite swap period. This is recommended property while adding the font to the website.
4) use font-family normally
The last and final property is too set font family as we do normally as below.
You can checkout the demo here: http://dev.tutorialspan.com/best-way-to-load-font-2019/
This is the best way to load font in 2019.Happy Coding 🙂
Front-end Developer. Passionate about designing, digital marketing, writing, and tea. You can connect with me on social media by links given below.