{"id":2661231,"date":"2020-08-26T11:18:17","date_gmt":"2020-08-26T09:18:17","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=2661231"},"modified":"2021-11-15T09:36:56","modified_gmt":"2021-11-15T08:36:56","slug":"self-hosting-google-fonts","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/","title":{"rendered":"Why Self-Hosting Google Fonts Isn\u2019t Recommended"},"content":{"rendered":"<p>Google Fonts are one of the most widely used third-party resources in many websites. They make it easy for websites to unify and present their content better. With over 999 free and unique font families to choose from, users have collectively viewed Google Fonts <a href=\"https:\/\/fonts.google.com\/analytics\">over 40 trillion times<\/a> (July 2020).&nbsp;<\/p><p>Externally hosted fonts like Google Fonts are also <a href=\"https:\/\/wp-rocket.me\/blog\/third-party-scripts\/\">one of the heaviest third-party resources<\/a> to load. Not only do they add to the page weight, but websites have to make additional HTTP requests to fetch them. The performance hit is even more prominent when you load multiple font families with multiple font weights.&nbsp;<\/p><p>Thus, it seems like a great idea to host Google Fonts locally and serve them from your server, as opposed to loading them from Google&#8217;s CDN. Theoretically, it could make your websites load faster. But it turns out that fonts are peculiarly complex, and self-hosting them may make optimizing your website\u2019s performance a little trickier.<\/p><p>In this article, you\u2019ll learn the basics of web fonts, including Google Fonts, and how you can host them locally. You\u2019ll then find out whether it makes a difference to a website\u2019s performance.<\/p><p>Excited? Let\u2019s begin.<\/p><h2 class=\"wp-block-heading\">What are Web Fonts?<\/h2><p>Web fonts refer to fonts that you can use to display text websites. They\u2019re a collection of glyphs, wherein each glyph is a vector that shows a letter, number, or a symbol.&nbsp;<\/p><p>In the early days of the web, developers had limited web fonts to choose from. Major operating systems came bundled with these fonts (e.g. Arial, Georgia, Times New Roman). Thus, they\u2019re also known as web-safe fonts.<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/populare-web-safe-fonts.png\" alt=\"A diagram of popular web-safe fonts \" class=\"wp-image-2662755\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/populare-web-safe-fonts.png 700w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/populare-web-safe-fonts-300x171.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption>A diagram of popular web-safe fonts (Source: <a href=\"https:\/\/www.coffeecup.com\/help\/articles\/what-is-a-web-safe-font\/\">CoffeeCup Software<\/a>)<\/figcaption><\/figure><p>CSS3 introduced <a href=\"https:\/\/drafts.csswg.org\/css-fonts-3\/#font-face-rule\">the @font-face rule<\/a> that allowed web developers to use custom fonts. Specifying them forces the browser to download them along with other website resources. This feature opened up new exciting ways to design websites. The web was no longer a collection of boring text.<\/p><p>Some of the most popular web fonts in use today are Open Sans, Roboto, and Lato. These are also Google Fonts. You can learn more about web fonts in <a href=\"https:\/\/wp-rocket.me\/blog\/guide-web-font-optimization\/\">WP Rocket\u2019s web font optimization guide<\/a>.<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"534\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-collection.png\" alt=\"There\u2019s a Google Font for almost every use\" class=\"wp-image-2662761\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-collection.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-collection-292x195.png 292w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-collection-768x513.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>There\u2019s a Google Font for almost every use (Source: <a href=\"https:\/\/design.google\/news\/happy-anniversary-google-fonts\/\">Google<\/a>)<\/figcaption><\/figure><h3 class=\"wp-block-heading\">What are Google Fonts?<\/h3><p>Google Fonts are a massive catalog of free, open source fonts. They make it easy for web designers and developers to create beautiful websites with great typography. As of now, Google Fonts include web fonts for over 135 languages.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"150\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-web-fonts.png\" alt=\"Google Fonts are used by 10+ million websites\" class=\"wp-image-2662786\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-web-fonts.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-web-fonts-310x58.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-web-fonts-768x144.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Google Fonts are used by 10+ million websites (Source: <a href=\"https:\/\/www.similartech.com\/technologies\/google-web-fonts\">SimilarTech<\/a>)<\/figcaption><\/figure><p>Google Fonts not only takes care of the licensing requirements for all the web fonts it hosts, but it also handles their hosting and delivery. You can even consider it as a CDN for fonts. Hence, everyone can take advantage of them anytime they want by adding a single line in their website\u2019s page headers.<\/p><h3 class=\"wp-block-heading\">Google Fonts and Website Performance<\/h3><p>Google Fonts claims to make web pages load faster by caching fonts across various sites so that each font loads only once for all websites. The browser can use the same cached font for any other website that requests the same Google Font.<\/p><p>It also detects a user\u2019s browser and sends them the smallest font file based on the latest technologies their browser supports. For example, it serves users fonts with WOFF 2.0 format whenever applicable as it has superior compression compared to other web font formats.&nbsp;<\/p><p>However, when you use Google Fonts on your website, the website\u2019s main stylesheet sends an HTTP request to fetch the Google Fonts stylesheet (a CSS file). The client sends this request to the <strong>fonts.googleapis.com<\/strong> domain. Typically, one request is generated for every font you use.&nbsp;&nbsp;<\/p><p>The Google Fonts stylesheet makes another request to download the font file (e.g. a WOFF or WOFF 2.0 file). The stylesheet directs these requests to the <strong>fonts.gstatic.com<\/strong> domain where all the Google Fonts are hosted.&nbsp;<\/p><p>Making extra HTTP requests on your websites takes time. You can confirm that by checking the waterfall chart generated by the WebPageTest tool.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"253\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/http-requests-1.png\" alt=\"Using Google Fonts adds at least two additional HTTP requests\" class=\"wp-image-2662795\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/http-requests-1.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/http-requests-1-300x95.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/http-requests-1-768x243.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Using Google Fonts adds at least two additional HTTP requests<\/figcaption><\/figure><p>Google Fonts API sets <a href=\"https:\/\/developers.google.com\/fonts\/faq#what_does_using_the_google_fonts_api_mean_for_the_privacy_of_my_users\">a low expiration time of 1 day for caching fonts<\/a>. You cannot modify this as Google generates the CSS file automatically based on multiple factors.<\/p><p>Some website speed testing tools point this out as a performance issue and suggest hosting fonts locally. This way you can increase the expiration time of fonts manually and cache them for a longer time. The below section covers how you can do exactly that on your WordPress site.&nbsp;<\/p><h2 class=\"wp-block-heading\">How to Serve Google Fonts from Your Server<\/h2><p>The simplest way to self-host Google Fonts locally on your WordPress site is with the <a href=\"https:\/\/wordpress.org\/plugins\/host-webfonts-local\/\">free OMGF WordPress plugin<\/a>. It uses the Google Fonts Helper API to download fonts to your webserver. After that, OMGF generates a stylesheet for the downloaded fonts and adds it to your site\u2019s header.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"363\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/omgf-wordpress-plugin.png\" alt=\"The OMGF WordPress plugin\" class=\"wp-image-2662801\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/omgf-wordpress-plugin.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/omgf-wordpress-plugin-310x141.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/omgf-wordpress-plugin-768x348.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>The OMGF WordPress plugin<\/figcaption><\/figure><p>It\u2019s easy to search for any Google Font family you want with OMFG. You can also click the <strong>Auto Detect<\/strong> button to let it analyze which Google Fonts are being used on your website.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"418\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/omgf-wordpress-plugin-settings.png\" alt=\"The OMGF admin dashboard\" class=\"wp-image-2662806\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/omgf-wordpress-plugin-settings.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/omgf-wordpress-plugin-settings-310x162.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/omgf-wordpress-plugin-settings-768x401.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>The OMGF admin dashboard<\/figcaption><\/figure><p>Once you\u2019ve settled on a particular font family, you can specify which font subsets and styles you want to download. This can help you reduce the size of the fonts being served significantly.&nbsp;<\/p><p>Serving Google Fonts locally should decrease pageload times by minimizing DNS requests and leveraging browser cache. But does this assumption really hold true?&nbsp;<\/p><h2 class=\"wp-block-heading\">Website Performance Test with Self-Hosted Google Fonts<\/h2><p>The WP Rocket dev team <a href=\"https:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/06\/Sinfonia-Portfolio-Lightbox-2-980x557.jpg\">set up a dummy website<\/a> which used Google Fonts. The first test site used just one font family. They then ran a few performance tests with it, both with the WP Rocket plugin enabled and disabled.\u00a0<\/p><p>Then they modified the website to serve Google Fonts locally and tested it again. As with before, they performed the tests separately with the WP Rocket plugin enabled and disabled.&nbsp;&nbsp;<br><strong>Note:<\/strong> GTMetrix was used to conduct this website performance test. The website used <strong>WP Rocket 3.6-alpha3<\/strong> build version with <strong>Optimize Google Fonts<\/strong> and <strong>Optimize CSS Delivery<\/strong> settings enabled. OMGF WordPress plugin was used to self-host the Google Fonts.<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"301\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/serving-google-fonts-speed.png\" alt=\"Results for serving Google Fonts from Google CDN vs hosting them locally\" class=\"wp-image-2662812\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/serving-google-fonts-speed.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/serving-google-fonts-speed-300x113.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/serving-google-fonts-speed-768x289.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Results for serving Google Fonts from Google CDN vs hosting them locally<\/figcaption><\/figure><p>The speed test results suggest that hosting Google Fonts locally don\u2019t give any specific performance benefits. They look almost identical.&nbsp;<\/p><p>To confirm this theory, they added many more fonts to the website before testing it again. The results below paint a more clear picture.<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"301\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/serving-google-fonts-speed-repeated.png\" alt=\"Repeat of the above speed test with many more fonts added\" class=\"wp-image-2662818\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/serving-google-fonts-speed-repeated.png 800w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/serving-google-fonts-speed-repeated-310x117.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/serving-google-fonts-speed-repeated-768x289.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Repeat of the above speed test with many more fonts added<\/figcaption><\/figure><p>With WP Rocket enabled, serving fonts directly from Google CDN turned out to be the fastest option. Otherwise, there\u2019s no specific performance benefits seen here like before.<\/p><p>Below are some screens from the speed test reports performed above. Note the loading time for fonts between the various tests.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"152\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-cdn-wprocket-1024x152.png\" alt=\"Google Fonts served from Google CDN with WP Rocket enabled\" class=\"wp-image-2662824\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-cdn-wprocket-1024x152.png 1024w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-cdn-wprocket-300x45.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-cdn-wprocket-768x114.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-cdn-wprocket-1080x160.png 1080w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-cdn-wprocket-896x133.png 896w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-cdn-wprocket.png 1279w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Google Fonts served from Google CDN with WP Rocket enabled<\/figcaption><\/figure><p>In the test here, the <strong>modules.tff<\/strong> font file serves as a control group. It\u2019s hosted on the same server as the test website in both the cases.<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"148\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-locally-wprocket-1024x148.png\" alt=\"Google Fonts hosted locally with WP Rocket enabled\" class=\"wp-image-2662835\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-locally-wprocket-1024x148.png 1024w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-locally-wprocket-300x43.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-locally-wprocket-768x111.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-locally-wprocket-1080x156.png 1080w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-locally-wprocket-896x129.png 896w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-locally-wprocket.png 1339w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Google Fonts hosted locally with WP Rocket enabled<\/figcaption><\/figure><p>The results show that Google Fonts load significantly faster from Google CDN. Even the locally hosted <strong>modules.tff<\/strong> font loads faster in the first case as compared to the second one.&nbsp;&nbsp;<\/p><p>Adding many Google Fonts only exacerbates the performance further.<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"257\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-google-cdn-1024x257.png\" alt=\"Google Fonts served from Google CDN\" class=\"wp-image-2662829\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-google-cdn-1024x257.png 1024w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-google-cdn-300x75.png 300w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-google-cdn-768x193.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-google-cdn-1080x271.png 1080w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-google-cdn-896x225.png 896w, https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/google-fonts-google-cdn.png 1498w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Google Fonts served from Google CDN<\/figcaption><\/figure><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/fonts-hosted-locally-1024x420.png\" alt=\"Fonts hosted locally\n\" class=\"wp-image-2662850\"\/><figcaption>Fonts hosted locally<\/figcaption><\/figure><p>Even with the additional HTTP requests added by Google Fonts, they load much faster from Google CDN than when they\u2019re hosted locally. So, what can explain this anomaly? The below section provides a brief explanation.&nbsp;<\/p><div id=\"om-ulrdquoprwqcywqbbgci-holder\"><\/div>\n\t<script>(function (d, u, ac) {\n\t\t\tvar s = d.createElement('script')\n\t\t\ts.type = 'text\/javascript'\n\t\t\ts.src = 'https:\/\/a.omappapi.com\/app\/js\/api.min.js'\n\t\t\ts.async = true\n\t\t\ts.dataset.user = u\n\t\t\ts.dataset.campaign = ac\n\t\t\td.getElementsByTagName('head')[0].appendChild(s)\n\t\t})(document, 20440, 'ulrdquoprwqcywqbbgci')<\/script><h2 class=\"wp-block-heading\">Why Google Fonts is Better<\/h2><ul class=\"wp-block-list\"><li>Google is clever about how it serves fonts to each user. It doesn\u2019t deliver the same CSS to everyone, but decides what stylesheet to serve based on the user\u2019s device, browser, and various other factors. For example, it\u2019ll serve fonts with resource-heavy features such as WOFF, Kerning, and Hints only to those user agents that support them. In all other cases, it\u2019ll use the superior <a href=\"https:\/\/www.w3.org\/TR\/WOFF2\/\">WOFF 2.0 compression<\/a> standard. This can help reduce the size of fonts delivered, making them load much faster.&nbsp;&nbsp;<\/li><li>Google Font API script downloads fonts on a per page basis based on multiple factors, even if the page header includes it. If a web page doesn\u2019t use the fonts specified, Google Fonts won\u2019t load it. If you\u2019re hosting fonts locally, it\u2019ll be hard to enable this functionality.&nbsp;&nbsp;<\/li><li>While reducing the number of HTTP requests is a great way to speed up your website\u2019s performance in most cases, the above test results suggest that it isn\u2019t the case with Google Fonts. The actual load time of your website will suffer if you host Google Fonts locally.<\/li><li>Google uses the best-in-class web performance technologies to serve fonts. Even if you know little about web fonts and how to use them, Google Fonts make it super easy to implement them on your website with no significant performance loss.&nbsp;<\/li><li>When a new web fonts technology arrives (e.g. <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/typography\/variable-fonts\">variable fonts<\/a>, <a href=\"https:\/\/rwt.io\/typography-tips\/progressive-font-enrichment-reinventing-web-font-performance\">progressive font enrichment<\/a>, better compression), Google Fonts API will bring it immediately to millions of websites. You don\u2019t have to do much to enable it.&nbsp;&nbsp;<\/li><\/ul><h2 class=\"wp-block-heading\">Summary<\/h2><p>Self-hosting fonts seems like a good way to speed up your website. But as we discovered above, Google Fonts is not just a vast repository of free fonts, it\u2019s also a smart way to deliver them with the latest web performance techniques.&nbsp;&nbsp;<\/p><p>You learnt that self-hosting web fonts is a bit more complex than just downloading and hosting them. Optimizing their delivery by yourself isn\u2019t that simple, unless you have the know-how and technical skills to implement it perfectly. Thankfully, Google Fonts handles all of it for you.&nbsp;<\/p><p>Ultimately, the more fonts (and subtypes) you use on your website, the longer it\u2019ll take to load. WP Rocket includes the <a href=\"https:\/\/docs.wp-rocket.me\/article\/1312-optimize-google-fonts\">Optimize Google Fonts<\/a> option to improve font performance without hosting fonts locally.&nbsp;<\/p><p>I hope this post convinced you why it\u2019s not recommended self-hosting Google Fonts in most cases.&nbsp;<\/p><p><em>Still having trouble with Google Fonts and optimizing them? If you have questions or suggestions, leave a comment below.&nbsp;<\/em><\/p>","protected":false},"excerpt":{"rendered":"<p>Self-hosting Google Fonts seem like a good way to speed up your website. Is that really so? Find out with this in-depth article.<\/p>\n","protected":false},"author":131875,"featured_media":2662907,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"kia_subtitle":"","footnotes":""},"categories":[63],"tags":[],"class_list":["post-2661231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-cache"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Why Self-Hosting Google Fonts Isn\u2019t Recommended<\/title>\n<meta name=\"description\" content=\"Self-hosting Google Fonts seem like a good way to speed up your website. Is that really so? Find out with this in-depth article.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why Self-Hosting Google Fonts Isn\u2019t Recommended\" \/>\n<meta property=\"og:description\" content=\"Self-hosting Google Fonts seem like a good way to speed up your website. Is that really so? Find out with this in-depth article.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Rocket\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-26T09:18:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-15T08:36:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/self-hosting-google-fonts.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"460\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:site\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/0152a367f602a6628c0bc4ecace1fc34\"},\"headline\":\"Why Self-Hosting Google Fonts Isn\u2019t Recommended\",\"datePublished\":\"2020-08-26T09:18:17+00:00\",\"dateModified\":\"2021-11-15T08:36:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/\"},\"wordCount\":1765,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/self-hosting-google-fonts.png\",\"articleSection\":[\"Page speed and caching\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/\",\"url\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/\",\"name\":\"Why Self-Hosting Google Fonts Isn\u2019t Recommended\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/self-hosting-google-fonts.png\",\"datePublished\":\"2020-08-26T09:18:17+00:00\",\"dateModified\":\"2021-11-15T08:36:56+00:00\",\"description\":\"Self-hosting Google Fonts seem like a good way to speed up your website. Is that really so? Find out with this in-depth article.\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/self-hosting-google-fonts.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/self-hosting-google-fonts.png\",\"width\":1100,\"height\":460,\"caption\":\"Self-Hosting Google Fonts\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wp-rocket.me\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Page speed and caching\",\"item\":\"https:\/\/wp-rocket.me\/blog\/wordpress-cache\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Why Self-Hosting Google Fonts Isn\u2019t Recommended\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wp-rocket.me\/#website\",\"url\":\"https:\/\/wp-rocket.me\/\",\"name\":\"WP Rocket\",\"description\":\"Plugin d&#039;optimisation de sites WordPress\",\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wp-rocket.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wp-rocket.me\/#organization\",\"name\":\"WP Rocket\",\"url\":\"https:\/\/wp-rocket.me\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"width\":150,\"height\":41,\"caption\":\"WP Rocket\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\",\"https:\/\/x.com\/wp_rocket\",\"https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/0152a367f602a6628c0bc4ecace1fc34\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2250657129436509050f973d3042ddd7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2250657129436509050f973d3042ddd7?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, and creator. He\u2019s a huge fan of Free and Open-Source Software. Apart from tech, he finds science, philosophy, and food exciting. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/wp-rocket.me\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why Self-Hosting Google Fonts Isn\u2019t Recommended","description":"Self-hosting Google Fonts seem like a good way to speed up your website. Is that really so? Find out with this in-depth article.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/","og_locale":"en_US","og_type":"article","og_title":"Why Self-Hosting Google Fonts Isn\u2019t Recommended","og_description":"Self-hosting Google Fonts seem like a good way to speed up your website. Is that really so? Find out with this in-depth article.","og_url":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_published_time":"2020-08-26T09:18:17+00:00","article_modified_time":"2021-11-15T08:36:56+00:00","og_image":[{"width":1100,"height":460,"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/self-hosting-google-fonts.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_creator":"@wp_rocket","twitter_site":"@wp_rocket","twitter_misc":{"Written by":"Salman Ravoof","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#article","isPartOf":{"@id":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/0152a367f602a6628c0bc4ecace1fc34"},"headline":"Why Self-Hosting Google Fonts Isn\u2019t Recommended","datePublished":"2020-08-26T09:18:17+00:00","dateModified":"2021-11-15T08:36:56+00:00","mainEntityOfPage":{"@id":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/"},"wordCount":1765,"commentCount":10,"publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"image":{"@id":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/self-hosting-google-fonts.png","articleSection":["Page speed and caching"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/","url":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/","name":"Why Self-Hosting Google Fonts Isn\u2019t Recommended","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/self-hosting-google-fonts.png","datePublished":"2020-08-26T09:18:17+00:00","dateModified":"2021-11-15T08:36:56+00:00","description":"Self-hosting Google Fonts seem like a good way to speed up your website. Is that really so? Find out with this in-depth article.","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/self-hosting-google-fonts.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/self-hosting-google-fonts.png","width":1100,"height":460,"caption":"Self-Hosting Google Fonts"},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/blog\/self-hosting-google-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wp-rocket.me"},{"@type":"ListItem","position":2,"name":"Page speed and caching","item":"https:\/\/wp-rocket.me\/blog\/wordpress-cache\/"},{"@type":"ListItem","position":3,"name":"Why Self-Hosting Google Fonts Isn\u2019t Recommended"}]},{"@type":"WebSite","@id":"https:\/\/wp-rocket.me\/#website","url":"https:\/\/wp-rocket.me\/","name":"WP Rocket","description":"Plugin d&#039;optimisation de sites WordPress","publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wp-rocket.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wp-rocket.me\/#organization","name":"WP Rocket","url":"https:\/\/wp-rocket.me\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","width":150,"height":41,"caption":"WP Rocket"},"image":{"@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","https:\/\/x.com\/wp_rocket","https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q"]},{"@type":"Person","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/0152a367f602a6628c0bc4ecace1fc34","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2250657129436509050f973d3042ddd7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2250657129436509050f973d3042ddd7?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, and creator. He\u2019s a huge fan of Free and Open-Source Software. Apart from tech, he finds science, philosophy, and food exciting. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/wp-rocket.me\/"]}]}},"_links":{"self":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts\/2661231"}],"collection":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/users\/131875"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/comments?post=2661231"}],"version-history":[{"count":0,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts\/2661231\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media\/2662907"}],"wp:attachment":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media?parent=2661231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/categories?post=2661231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/tags?post=2661231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}