How Custom Fonts Slow Down Your Page Loading Speed

Site speed plays very important role in both on-page and off-page search engine optimization of a site. Giant search engines like Google, Bing and Yahoo count page loading speed as a rank deciding factor. On the other hand, a user isn't going to love a slow loading site which stops them from returning to it. So a webmaster must avoid annoying factors which slow down the page loading process. There are many factors which increase site loading time which is not liked by either bots or humans.

In this article, we are going to discuss that factor which doesn't seem to have any notable impact on page loading but in reality, it takes a major part of page loading. This factor is inappropriate use of custom fonts.

What Are Custom Fonts:

In addition to default fonts, custom fonts are those third party fonts which are used by webmasters in their sites to give an elegant look to the text found in their site. They are custom designed fonts which change the appearance of text on the page. They can be easily installed in a website or blog using @font-face CSS rule. Custom fonts themselves don't reduce the site speed but their inappropriate use is responsible for this. Before moving further to custom fonts, I am going to explain the whole process behind loading of a webpage so you can easily understand it.

How A Webpage Is Loaded/Rendered:

Page loading process is also called "Rendering" process. Some files and scripts are downloaded before the rendering of a webpage is started. Until then, nothing is seen and only a white window on the user's screen. The resources, files or scripts which  are downloaded in this time keeps blocking the page loading process so they are called "Render Blocking". Majority of third party CSS files and scripts are render blocking no matter from which service provider they are. If you are using a lot of third party widgets and scripts in your site, you may experience a marked increase in render blocking period. It is best practice to eliminate unnecessary downloads (render blocking CSS files, scripts) to improve site's speed.

Role Of Custom Fonts In Page Rendering:

While talking about Custom fonts, they use @font-face CSS rule. It includes an external font file which is downloaded first before the rendering of a webpage starts and until it isn't downloaded completely, the webpage doesn't start to load. It means that a custom font is a render blocking file so it has a prominent impact on page loading speed.
Third party designers who design custom templates for websites install many types of custom fonts in them which in demo don't seem to have marked decrease in speed because usually demo blogs don't contain other render blocking resources. The problem arises when site owner install the template and add other widgets in it. These widgets collectively with custom fonts lower the pace of page rendering. Minimum but effective usage of custom fonts is always advised. Now we will be moving forward towards best practices for custom fonts.

Best Practices For Using Custom Fonts In Web-Site:

We are not advising to stop using custom fonts completely because sometimes you need them to use fonts of your own choice for glamour purpose to attract visitors. However, you should prioritize usage of default fonts like Helvetica, Arial, Times New Roman, Verdana, Georgia, Trebuchet, Courier etc which are also stylish enough to give a graceful look to your blog and they doesn't have any effect on page rendering.
If you are not satisfied from default fonts and wish to use custom fonts at any cost, then we recommend you following practices.

• Before installing a font, you must know how fast it is loaded. Google fonts also show how much time a font takes to load. Choose the fonts which take least time to load.
• Install those fonts only which you want to use. Never install unnecessary fonts even don't install unnecessary weights of fonts for example you are going to use only 400 weight of font, then install only 400 weight font. Don't go for 700 along with it because even you install both fonts collectively via a single attribute, their downloading speed remains as it is for installing them separately.
• Eliminate unnecessary render blocking resources. Use Google page speed insights to find out Render blocking resources in your webpage.
• Install custom fonts from reliable sources.

These practices will always help you overcoming slow site loading speed with inappropriate usage of custom fonts. Hope you like and find it helpful. Stay tuned with us to get more from us.