{"id":35373,"date":"2022-03-09T15:00:06","date_gmt":"2022-03-09T14:00:06","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=35373"},"modified":"2022-03-08T14:49:05","modified_gmt":"2022-03-08T13:49:05","slug":"how-to-host-google-fonts-locally-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-host-google-fonts-locally-in-wordpress\/","title":{"rendered":"How to Host Google Fonts Locally in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Google Fonts are, without a doubt,<strong> one of the easiest ways to customize your website<\/strong>. Using Google fonts has other benefits, as well: it pretty much guarantees that your text will be parsed correctly and presented to your website visitors as intended. A significant advantage of Google Fonts is also that you don\u2019t need to actually host Google Fonts locally \u2013 your website simply requests them from a Google server.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So what\u2019s the problem, then? Why would you even want to<strong> sacrifice some hosting space to store font files<\/strong> which don\u2019t need to be stored locally? And, taking a step back, <strong>what are Google Fonts<\/strong> and how are they different from ordinary fonts in WordPress? We will answer these and other questions in this article. If you feel like you know what you\u2019re doing, feel free to skip right down to the how-to section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we\u2019ll be talking about:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-google-fonts\">What Are Google Fonts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-host-google-fonts-locally\">Why Host Google Fonts Locally<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-not-just-stop-using-google-fonts\">Why Not Just Stop Using Google Fonts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-host-google-fonts-locally\">How to Host Google Fonts Locally<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-google-fonts\"><\/a>What Are Google Fonts<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-Are-Google-Fonts.jpg\" class=\"attachment-full size-full\" alt=\"What Are Google Fonts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-Are-Google-Fonts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-Are-Google-Fonts-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-Are-Google-Fonts-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-Are-Google-Fonts-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To start with, a font is a type of vector graphic most often used to render text. The fact that they are vector graphics makes them also useful for simple icons. <strong>Google Fonts is a library of fonts<\/strong> that are free, open-source, and optimized for compatibility. There are <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-google-fonts\/\">plenty of Google Fonts to choose from<\/a>, they can fit any brand or style, and that is why they are preferred by web designers.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The library itself was launched as early as 2010, and, as of the time of writing, contains over a thousand font families, most released under the Open Font License. This makes them <strong>usable even in commercial products<\/strong> without charge or attribution.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-host-google-fonts-locally\"><\/a>Why Host Google Fonts Locally<\/h2>\n<p>[\/vc_column_text][vc_column_text]When your website tries to render a font using Google Font, it loads it from a different server. While this saves you some little server space, as the font is not part of your website\u2019s code, it also means <strong>your website loads that much slower.<\/strong> Not so much so you\u2019d notice it most times, but the slowdown is perceptible to your browser and will be marked by tools such as PageInsights. And that can affect your SERP rankings. The irony of using Google Fonts \u2013 a Google service \u2013 as intended lowering your score on Google Page Insights is amusing, but that\u2019s not our main point. And it shouldn\u2019t be your main concern.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The other, much more important issue is that some <strong>European jurisdictions now consider Google Fonts an illegal breach of privacy regulations.<\/strong> For a long while, it had been <a href=\"https:\/\/ffw.press\/blog\/how-to\/google-fonts-gdpr\/\" target=\"_blank\" rel=\"noopener\">doubtful that Google Fonts is compliant<\/a> with the latest consumer protection law in Europe. GDPR, or <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpres-gdpr-compliance\/\">General Data Protection Regulation<\/a>, applies to personal data belonging to all EU citizens. This means that, in order to do any kind of business in Europe, you need to be GDPR compliant.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On January 20th 2022, a German court ruled that <a href=\"https:\/\/thehackernews.com\/2022\/01\/german-court-rules-websites-embedding.html\" target=\"_blank\" rel=\"noopener\">Google Fonts violates GDPR<\/a>. This means that using Google Fonts makes each user&#8217;s IP address available to Google, when in fact they never meant to interact with Google. IP being personally identifiable information, it falls under the remit of GDPR. Moreover, the original ruling is that, since the offending website made available a user\u2019s personal data to Google without prior informed consent, the offending website was liable for damages ensuing. It pays to be GDPR compliant.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-not-just-stop-using-google-fonts\"><\/a>Why Not Just Stop Using Google Fonts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, of course, you have put in a lot of time and effort, and possibly even money into designing your website and making it just so. If you just<strong> stop using Google Fonts<\/strong>, you will need to find suitable alternatives. Or worse, your theme might <strong>revert to system fonts<\/strong>. Not only will that look bad, but it will also make your website appear weird and untrustworthy to a visitor. Think about it: would you feel comfortable sharing your data with a website that appears just <em>slightly off<\/em> somehow?[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, there is a way to keep using Google Fonts and remain GDPR compliant. In order to do so, you need to host your Google Fonts locally.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-host-google-fonts-locally\"><\/a>How to Host Google Fonts Locally<\/h2>\n<p>[\/vc_column_text][vc_column_text]As is so often the case with WordPress, a problem can typically be solved with a plugin. To resolve our Google Fonts issues, we will be using a free and user-friendly plugin called <a href=\"https:\/\/wordpress.org\/plugins\/host-webfonts-local\/\" target=\"_blank\" rel=\"noopener\">OMGF<\/a>. OMGF stands for Optimize My Google Fonts, and that\u2019s exactly what the plugin does.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After having <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installed and activated the plugin<\/a>, you\u2019re basically done. It\u2019s that simple.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While the plugin has several functions, we will be focusing on generating locally hosted copies of Google fonts. And all you need to do to achieve that is to navigate to <strong>Settings\/Optimize Google Fonts<\/strong> from your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"502\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Settings-Optimize-Google-Fonts.jpg\" class=\"attachment-full size-full\" alt=\"Settings Optimize Google Fonts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Settings-Optimize-Google-Fonts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Settings-Optimize-Google-Fonts-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Settings-Optimize-Google-Fonts-768x398.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Settings-Optimize-Google-Fonts-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once there, you will see the plugin\u2019s settings organized into several tabs. The <strong>Optimize Fonts<\/strong> tab should be open automatically. If not, open it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"582\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Optimize-Fonts.jpg\" class=\"attachment-full size-full\" alt=\"Optimize Fonts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Optimize-Fonts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Optimize-Fonts-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Optimize-Fonts-768x461.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Optimize-Fonts-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Scroll all the way down and click the <strong>Save &amp; Optimize<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Save-and-Optimize.jpg\" class=\"attachment-full size-full\" alt=\"Save and Optimize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Save-and-Optimize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Save-and-Optimize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Save-and-Optimize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Save-and-Optimize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s it. You\u2019re done. Your Google Fonts are hosted locally, your website loads faster, and is GDPR compliant, making you therefore safe from lawsuits and liability \u2013 at least in one respect.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]Optimizing your website for faster loading is something you should be thinking about even without any extra incentive. That is to say, with fonts being reasonably small in size, it stands to reason that you should be storing them locally anyway, even if you don\u2019t plan on doing business with EU citizens.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, when you factor in the fact that the internet is everywhere and that you have little control of who can actually visit your website, you have every reason to make sure your website does not violate the very stringent GDPR stipulations. Especially if the solution is, as it is in this case, to simply install and activate a free plugin that arrives already configured. So, whether you are looking to make your website load a little bit faster or if you fear legal expenses and damages ensuing from GDPR violations (or both, why not), now you know how to start hosting Google Fonts with just a few clicks of the mouse.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Avoid falling afoul of GDPR and speed up your website: host Google Fonts locally! We will show you how it&#8217;s done.<\/p>\n","protected":false},"author":16990,"featured_media":35388,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[225,4,54],"class_list":["post-35373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-google-fonts","tag-tips","tag-typography"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=35373"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35373\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/35388"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=35373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=35373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=35373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}