{"id":2021260,"date":"2024-07-16T07:51:06","date_gmt":"2024-07-16T07:51:06","guid":{"rendered":"https:\/\/wpx.net\/blog\/?p=2021260"},"modified":"2025-01-28T08:55:46","modified_gmt":"2025-01-28T08:55:46","slug":"beginners-guide-to-adding-custom-fonts-to-wordpress","status":"publish","type":"post","link":"https:\/\/wpx.net\/blog\/beginners-guide-to-adding-custom-fonts-to-wordpress\/","title":{"rendered":"A Beginner&#8217;s Guide to Adding Custom Fonts to WordPress in 2 Easy Steps"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>As any other online business, you want your website to stand out from the rest by using different themes and plugins to appeal to your visitors. One strong recommendation when managing a WordPress based website is to use different custom fonts to add to your design that much needed final touch. We will cover the basics in this article on which fonts to use and how to choose them carefully to fit your individual needs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Find_and_choose_the_correct_Custom_Font_for_your_WordPress_Site\"><\/span>Step 1. Find and choose the correct Custom Font for your WordPress Site.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Finding sources for the perfect custom font to add to your WordPress website will not be hard since there are a lot to cover such as <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Google Fonts<\/strong><\/a>, <a href=\"https:\/\/www.fontsquirrel.com\/\" target=\"_blank\" rel=\"noopener\"><strong>FontSquirrel<\/strong><\/a>, and <a href=\"https:\/\/www.fontspace.com\/category\/custom\" target=\"_blank\" rel=\"noopener\"><strong>FontSpace<\/strong><\/a>.<\/p>\n\n\n\n<p>Heroic Message: Additionally, if you are picky with your choice and do not like the fonts that are offered from the services mentioned above, you can try and generate your own unique custom font, driven by your ideas. That can happen by using a tool such as <a href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" target=\"_blank\" rel=\"noopener\"><strong>FontSquirrel Generator<\/strong><\/a>. From there you can choose from a variety of different options to pick the correct one to your liking.&nbsp;<\/p>\n\n\n\n<p>The main thing to look for in a font would be the \u201cbe cool\u201d factor and how it will stand out on your website and of course, the boring stuff related to readability, where you need to be careful.<\/p>\n\n\n\n<p><span style=\"color: #fc5819;\" class=\"stk-highlight\"><em>Keep in mind that the \u201ccool\u201d factor for choosing a unique font needs to be thought through carefully since it will affect the readability of your website. If it looks cool but damages the overall look of the website, we recommend that you source out a different one that will suit your needs in a balanced manner. You need to make sure that your visitors can read easily through your website without having too many different fonts and actions happening in one place, leading to annoyance.<\/em><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Adding_Custom_Fonts_from_Google_Fonts\"><\/span>Step 2. Adding Custom Fonts from Google Fonts.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>As explained earlier, Google Fonts provides the biggest library available for free for fonts to use on your WordPress website. If you are searching for the perfect one, that will most likely be the best place to find it.<\/p>\n\n\n\n<p>The first step to adding the desired font is to install the plugin <a href=\"https:\/\/wordpress.org\/plugins\/olympus-google-fonts\/\" target=\"_blank\" rel=\"noopener\"><strong>Google Fonts Typography<\/strong><\/a><strong> <\/strong>on your WordPress website. Once installed, you will need to activate it like any other WordPress plugin you have.<\/p>\n\n\n\n<p>Upon activation, you will be prompted to input an email address to receive a beginners guide on how to properly use the plugin. The step is optional and it is up to you if you want to use their free instructions on how to utilize it:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"964\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-14.png\" alt=\"Adding Custom Fonts from Google Fonts\" class=\"wp-image-2021268\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-14.png 1600w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-14-300x181.png 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-14-1024x617.png 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-14-768x463.png 768w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-14-1536x925.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>The next step is finally where some work is done on your website. You would need to navigate through the dropdown menu of the plugin and choose <strong>Customize Fonts<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"520\" height=\"689\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-10.png\" alt=\"customize fonts\" class=\"wp-image-2021264\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-10.png 520w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-10-226x300.png 226w\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" \/><\/figure>\n\n\n\n<p>From there, you will be automatically redirected to the built-in WordPress Theme Customizer:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"554\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-13.png\" alt=\"wordpress theme customizer\" class=\"wp-image-2021267\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-13.png 1600w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-13-300x104.png 300w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-13-1024x355.png 1024w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-13-768x266.png 768w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-13-1536x532.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>There, you can start laying the foundation for your WordPress website by choosing the default fonts through the \u201cBasic Settings\u201d section:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"1105\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-12.png\" alt=\"fonts plugin\" class=\"wp-image-2021266\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-12.png 598w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-12-162x300.png 162w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-12-554x1024.png 554w\" sizes=\"auto, (max-width: 598px) 100vw, 598px\" \/><\/figure>\n\n\n\n<p>There, you will see all the different fields you can choose to set up the groundwork for your website appearance such as your <strong>base<\/strong>, <strong>heading<\/strong>, <strong>buttons and inputs<\/strong>.<\/p>\n\n\n\n<p><span style=\"color: #fc5819;\" class=\"stk-highlight\"><em>Once you have chosen all the options for different fonts on the left of your screen, the right half will generate a preview of all the things you saved, so you can actually see what you are doing in real time.<\/em><\/span><\/p>\n\n\n\n<p>Once you are done with the basics, you can start applying custom fonts for different parts of your website through the \u201cAdvanced Settings\u201d section:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"827\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-9.png\" alt=\"advanced settings\" class=\"wp-image-2021263\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-9.png 598w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-9-217x300.png 217w\" sizes=\"auto, (max-width: 598px) 100vw, 598px\" \/><\/figure>\n\n\n\n<p>From these settings you can basically touch up and fine tune all the groundwork you set with the basic fonts and make changes on your <strong>Site Title<\/strong>, <strong>Navigation Menu<\/strong>, <strong>Content<\/strong> and much more.<\/p>\n\n\n\n<p><span style=\"color: #fc5819;\" class=\"stk-highlight\"><em>Every section in \u201cAdvanced Settings\u201d has a drop-down menu from which you can choose different fonts. Wants you are ready with all the major changes on your WordPress website appearance, then you can simply save all the changes by clicking <strong>Publish<\/strong>:<\/em><\/span><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"601\" height=\"865\" src=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-11.png\" alt=\"customizing fonts\" class=\"wp-image-2021265\" style=\"width:541px;height:auto\" srcset=\"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-11.png 601w, https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/image-11-208x300.png 208w\" sizes=\"auto, (max-width: 601px) 100vw, 601px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>That\u2019s it! You have successfully learned how easy it is adding custom fonts to WordPress site! An important note to take here is that you need to check if all the fonts mix and match together, as well as the read quality of your website. Fun recommendation is to get some of your friends to read through your website and make suggestions if something is wrong with the text. Most times those little things might matter and help you sort out anything that you haven\u2019t noticed already.<\/p>\n\n\n\n<p>If you find this guide on adding custom fonts to WordPress helpful, check out our\u00a0<a href=\"https:\/\/wpx.net\/blog\/how-to-backup-woocommerce-orders-beginners-guide\/\" data-type=\"link\" data-id=\"https:\/\/wpx.net\/blog\/how-to-backup-woocommerce-orders-beginners-guide\/\">Beginner\u2019s Guide to Backing Up WooCommerce Orders<\/a> too!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As any other online business, you want your website to stand out from the rest by using different themes and plugins to appeal to your visitors. One strong recommendation when managing a WordPress based website is to use different custom fonts to add to your design that much needed final touch. We will cover the [&hellip;]<\/p>\n","protected":false},"author":29,"featured_media":2021261,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[86],"tags":[138,44,145,139,122,121],"ppma_author":[150],"class_list":["post-2021260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-guide","tag-hacks","tag-how-to","tag-step-by-step","tag-web-hosting","tag-wordpress"],"blocksy_meta":[],"authors":[{"term_id":150,"user_id":29,"is_guest":0,"slug":"svetlozar-todorov","display_name":"Svetlozar Todorov","avatar_url":{"url":"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/Profile-Picture.png","url2x":"https:\/\/wpx.net\/blog\/wp-content\/uploads\/2024\/07\/Profile-Picture.png"},"0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/posts\/2021260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/comments?post=2021260"}],"version-history":[{"count":4,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/posts\/2021260\/revisions"}],"predecessor-version":[{"id":2021929,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/posts\/2021260\/revisions\/2021929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/media\/2021261"}],"wp:attachment":[{"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/media?parent=2021260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/categories?post=2021260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/tags?post=2021260"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/wpx.net\/blog\/wp-json\/wp\/v2\/ppma_author?post=2021260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}