How to use Google Font in Blogger with faster speed instruction

2022/9/26 witten2022/9/16

Since Blogger does not provide a server to upload google fonts to individuals, it is not possible to use size-optimized web fonts for use on your own blog. Within such a limited environment, we must find a way to display web fonts at the fastest possible display speed. Many people give up on web fonts because of the impact of site display speed on SEO, But with this setting that I'm going to introduce you today, your blog can be displayed at high speed with web fonts.

Conclution of Displaying Google Fonts with Faster Speed

I've checked the display speed in various settings with speed insight, the conclusion was to set up the following


<link crossorigin='' href='https://fonts.gstatic.com' rel='preconnect'/>
<link as='style' href='https://fonts.googleapis.com/css?family=Roboto&amp;display=swap' rel='preload'/>
<link href='https://fonts.googleapis.com/css?family=Roboto&amp;display=swap' media='print' onload='this.media='all'' rel='stylesheet'/>

originally the google web font site indicates impliment code like bellow


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

but putting exactly the same code to blogger template will cause an error. You need to replace every "&" charactor to "&". so again the code sould be looking like


<link crossorigin='' href='https://fonts.gstatic.com' rel='preconnect'/>
<link as='style' href='https://fonts.googleapis.com/css?family=Roboto&amp;display=swap' rel='preload'/>
<link href='https://fonts.googleapis.com/css?family=Roboto&amp;display=swap' media='print' onload='this.media='all'' rel='stylesheet'/>

The red lined part could be replaced with your desired web font's name. Place all the 3 lines just above </head> tag and save the template. That's all.