Why you need to add your custom fonts locally
Today, many developers utilize numerous fonts from all over the web to deliver a unique user interface for their clients. For example, developers use Google Fonts, a free, open-source library of fonts available for personal and commercial use. However, custom fonts and large icon libraries provide a potential performance degradation and slower first-paint time. The issue Here are some common ways developers insert fonts into their website: <head> ... <!--Linking to a render-blocking resource into the webpage--> <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100&display=swap" rel="stylesheet"> </head> body { /* and using in CSS */ font-family: 'Josefin Sans', sans-serif; } In this example, the webpage must create an additional cross-origin network request to obtain the CSS file from Google’s font service. This network request adds multiple seconds to the render time for users with a poor connection. ...