![]() Visit the Webfont Generator tab and upload the Montserrat Regular font file, which we downloaded from Google Fonts. We can convert the TTF fonts to WOFF 2.0 format with this Webfont Generator. Second Step – Font Squirrel Webfont Generatorįont Squirrel’s Webfont Generator is an excellent tool to convert fonts. ![]() Now hover over the down arrow to download the font to your computer. Then you can see the 1 Family Selected drawer at the bottom of the page. In this Google Fonts page for Montserrat Font, click on the SELECT THIS FONT button. To download Montserrat Font, head over to Google Fonts. First Step – Download Montserrat Font from Google Fonts But as you can guess, the format is WOFF 2.0 instead of TTF.ĭo you know that you can increase the Google Page Insight score and reduce the website loading time by following these steps? Instead, I called the fonts directly to WordPress via CSS. So, my first step to achieving the 1040x lighter version of my Montserrat font is not to use Divi’s native custom font feature. The WOFF 2.0 version is 171% smaller than the TTF version. I tested the TTF version and WOFF 2.0 version of the same Montserrat font. Please see How To Upload Custom Fonts in Divi Builder to know how that works.īut the problem with this method is that Divi won’t support modern web font formats like WOFF or WOFF 2.0. We can upload a custom font in the Divi theme and then use it site-wide instead of relying on Google Fonts. More external calls make the website slower. That’s one of the main reasons I prefer hosting fonts locally. From a performance optimization point of view, these requests are costly. When a website requests fonts from Google, external HTTP/DNS requests are made to and. But we prefer hosting the fonts locally to save HTTP requests to Google Fonts servers. Serving web fonts from services like Google Fonts is efficient and easy to implement. ![]() Locally means we serve it from our Web servers. When it comes to Web Font optimization, usually consider hosting the fonts locally. Let me explain.īut before that, let me brief how most of us optimize the font files. Optimizing a web font file reduces the website loading time significantly. The latest PHP version, updated Themes, Plugins compress images, minify CSS and JS files are a few well-known steps.īut there is an underrated file type that needs to give more attention. Having a robust server and network infrastructure plays a vital role. There is so much work to do to make sure the website loads as fast as possible. Typical Performance Optimisation Efforts for FontsĮvery website owner is so much concerned about their web page performance. Please note that the final output and savings depend on the font family and other settings you use. Both Regular and Bold variants weigh 240 KB and 239 KB. ![]() Google’s analytics says that more than 7,400,000 websites use Montserrat, a super stylish font.īut Montserrat is a heavy font. I use Montserrat Regular for body text and Montserrat Bold for headings. Montserrat is the font I use on this website. Every type of website can make use of this method. I assume that you are using a locally hosted web font and not calling it from external resources like Google Fonts. Third Step – Upload the Reduced Font Files.Second Step – Font Squirrel Webfont Generator.First Step – Download Montserrat Font from Google Fonts.Typical Performance Optimisation Efforts for Fonts.
0 Comments
Leave a Reply. |