{"id":2413,"date":"2023-09-19T09:53:36","date_gmt":"2023-09-19T02:53:36","guid":{"rendered":"https:\/\/dev.artru.io.vn\/?p=2413"},"modified":"2024-01-03T12:14:12","modified_gmt":"2024-01-03T05:14:12","slug":"toi-uu-google-font-bang-javascript","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/toi-uu-google-font-bang-javascript\/","title":{"rendered":"Optimize Google Font with JavaScript"},"content":{"rendered":"

A beautiful website also needs a good font set. You can use Google Font to get the Font set you like. However, this more or less affects the loading speed of the website and it also reduces the internal performance score PageSpeed Insights<\/a>.<\/p>\n\n\n\n

There are many articles on how to optimize Google Font using attributes font-display: swap<\/code>. But it only fixes the "webfont load" error and does not increase performance score.<\/p>\n\n\n

\n
\"Webfont
Webfont loading error<\/figcaption><\/figure>\n<\/div>\n\n\n

In this article, I will show you how to optimize Google Fonts with JavaScript so you can freely choose fonts for your website without worrying about speed anymore.<\/p>\n\n\n\n

Select Google Fonts<\/h2>\n\n\n\n

To choose Font you need to access Google Fonts<\/a>.<\/p>\n\n\n\n

As my example, the Font "Montserrat" has 2 font sizes "400" and "700".<\/p>\n\n\n\n

You can also choose many other font styles and import them into a single url.<\/p>\n\n\n

\n
\"Google
Google Font Montserrat<\/figcaption><\/figure>\n<\/div>\n\n\n

Use JavaScript to optimize Google Font<\/h2>\n\n\n\n

These are 2 ways to download Google's default Fonts.<\/p>\n\n\n\n

<!-- 1. <link> -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n<!-- 2. @import -->\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap');\n<\/style><\/code><\/pre>\n\n\n\n
Even though Google Font has added properties font-display: swap<\/code>. But when testing performance on PageSpeed Insights, I still get errors related to FCP (First Contentful Paint) and LCP (Largest Contentful Paint).<\/p>\n\n\n\n
To fix this problem, I will load Google Font with JavaScript code and place it at the bottom of the page (Footer).<\/p>\n\n\n\n
<script>\n    document.addEventListener(\"DOMContentLoaded\", () => {\n        const script_font = document.createElement('link');\n        script_font.href = 'https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;700&display=swap';\n        script_font.setAttribute('rel', 'stylesheet');\n        document.body.appendChild(script_font);\n    });\n<\/script><\/code><\/pre>\n\n\n\n
At the line script_font.href<\/code> Please get the url from the item @import<\/code> that Google provides.<\/p>\n\n\n\n
After changing this way of loading Fonts, check your website speed to see if it has improved.<\/p>\n\n\n
\n
\"Speed
Speed after optimizing Google Font<\/figcaption><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"
M\u1ed9t website \u0111\u1eb9p c\u0169ng c\u1ea7n c\u00f3 m\u1ed9t b\u1ed9 Font \u1ed5n. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Google Font \u0111\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c b\u1ed9 Font \u01b0ng \u00fd. Tuy nhi\u00ean, \u0111i\u1ec1u n\u00e0y \u00edt nhi\u1ec1u […]<\/p>\n","protected":false},"author":1,"featured_media":2438,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=2413"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2413\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/2438"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=2413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=2413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=2413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}