{"id":26658,"date":"2020-11-05T05:06:11","date_gmt":"2020-11-05T05:06:11","guid":{"rendered":"https:\/\/rarathemes.com\/blog\/?p=26658"},"modified":"2024-08-21T13:47:05","modified_gmt":"2024-08-21T08:02:05","slug":"add-custom-fonts-wordpress","status":"publish","type":"post","link":"https:\/\/rarathemes.com\/blog\/add-custom-fonts-wordpress\/","title":{"rendered":"How to Add Custom Fonts to WordPress?"},"content":{"rendered":"\n<p>Learning to customize your website\u2019s typography is a pretty basic aspect of creating and running a website. It can change your website\u2019s whole feel and make a big difference in how visitors interact with your customers.&nbsp;&nbsp;<\/p>\n\n\n\n<p>So, it is necessary to know how to add custom fonts to WordPress. Choosing the right font <a href=\"https:\/\/rarathemes.com\/blog\/create-a-business-website-with-wordpress\/\">creates a distinct look for your website<\/a>, allows you to build your visual brand, and boosts readability and visitor engagement.&nbsp;<\/p>\n\n\n\n<p>There are thousands of fonts available online that you can use, many of them free of cost. This article will talk about adding fonts from two of the most popular web fonts databases to your website \u2014 <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">Google Fonts<\/a> and <a href=\"https:\/\/fonts.adobe.com\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">Adobe Fonts<\/a>, also known as Typekit Fonts. These font libraries include thousands of web fonts that you can download.&nbsp;<\/p>\n\n\n\n<p>There are countless other font libraries on the internet alongside these, and we will talk about those too.&nbsp;<\/p>\n\n\n\n<p>Here are the ways you can add these custom fonts to your website:<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rarathemes.com\/blog\/add-custom-fonts-wordpress\/#How_to_Add_Custom_Fonts_to_WordPress\" >How to Add Custom Fonts to WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rarathemes.com\/blog\/add-custom-fonts-wordpress\/#1_Add_Google_Fonts_Using_Plugin\" >1. Add Google Fonts Using Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rarathemes.com\/blog\/add-custom-fonts-wordpress\/#2_Add_Google_Fonts_Using_Code\" >2. Add Google Fonts Using Code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rarathemes.com\/blog\/add-custom-fonts-wordpress\/#3_Add_Adobe_TypeKit_Fonts_to_WordPress\" >3. Add Adobe TypeKit Fonts to WordPress<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rarathemes.com\/blog\/add-custom-fonts-wordpress\/#Some_Other_Custom_Fonts_Libraries\" >Some Other Custom Fonts Libraries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rarathemes.com\/blog\/add-custom-fonts-wordpress\/#How_to_Add_Other_Custom_Fonts_Using_Plugin\" >How to Add Other Custom Fonts Using Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rarathemes.com\/blog\/add-custom-fonts-wordpress\/#How_to_Add_Other_Custom_Fonts_Manually\" >How to Add Other Custom Fonts Manually<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rarathemes.com\/blog\/add-custom-fonts-wordpress\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Add_Custom_Fonts_to_WordPress\"><\/span>How to Add Custom Fonts to WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Add_Google_Fonts_Using_Plugin\"><\/span>1. Add Google Fonts Using Plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If you plan to use Google Fonts to stylize your WordPress website content, then there is a <a href=\"https:\/\/rarathemes.com\/blog\/wordpress-features\/\">handy tool that directly connects your WordPress<\/a> Customizer with the Google Fonts database. <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/easy-google-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">Easy Google Fonts<\/a> is that&#8217;s free and allows you to use Google Fonts without having to work with any code.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>For this method, install the <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/easy-google-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">Easy Google Fonts<\/a> plugin first. Once the plugin is set up, you will find a new option called \u2018Typography\u2019 in your WordPress Customizer (Appearance &gt; Customize).&nbsp;<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"362\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.1-Typography.jpg\" alt=\"Typography\" class=\"wp-image-26659\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.1-Typography.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.1-Typography-300x149.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.1-Typography-121x60.jpg 121w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.1-Typography-358x179.jpg 358w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p>2. Once you go to the Typography option, you will find different default content sections or font controls that you can customize. You can find the font settings for that particular group by clicking on \u2018Edit Font.\u2019<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"420\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.2-Edit-Font.jpg\" alt=\"Edit Font\" class=\"wp-image-26660\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.2-Edit-Font.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.2-Edit-Font-300x173.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.2-Edit-Font-104x60.jpg 104w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p>The font settings are quite extensive and allow you to customize virtually every aspect of your text to create the desired font style, like font size and more. You can change the font for that particular text category from the Font Family option under the Styles tab.&nbsp;<\/p>\n\n\n\n<p>Under the Appearance tab, you can find other common options, like Font Color, Font Size, and Line Height.&nbsp;<\/p>\n\n\n\n<p>There are some in-depth visual controls under the Positioning tab, like Margin, Padding, and Border.&nbsp;<\/p>\n\n\n\n<p>3. Now, your website might also require special attention to certain text categories that may not be addressed by the default font controls provided by this plugin. Maybe you just want the same typography settings for all your headings and want a single category to control all of them. You can <strong>create custom font controls<\/strong> by going to Settings &gt; Google Fonts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"376\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.3-Google-Fonts.jpg\" alt=\"Google Fonts\" class=\"wp-image-26661\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.3-Google-Fonts.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.3-Google-Fonts-300x155.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.3-Google-Fonts-116x60.jpg 116w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p>4. Go to the Manage Font Controls tab, and click on \u2018Create a Font Control.\u2019<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"300\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.4-Create-a-New-Font-Control.jpg\" alt=\"Create a New Font Control\" class=\"wp-image-26662\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.4-Create-a-New-Font-Control.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.4-Create-a-New-Font-Control-300x123.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.4-Create-a-New-Font-Control-146x60.jpg 146w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p>5. You will be asked to provide CSS Selectors to define this particular category. Then, click on \u2018Safe Font Control\u2019 to create the new category\/font control.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"183\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.5-CSS-Selectors.jpg\" alt=\"CSS Selectors\" class=\"wp-image-26664\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.5-CSS-Selectors.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.5-CSS-Selectors-300x75.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.5-CSS-Selectors-239x60.jpg 239w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p>6. The custom font controls can be found at a different location than the default ones. Go back to the WordPress Customizer and click on the Typography option. You will find that there are two categories \u2014 Default Typography and Theme Typography. The custom font controls will be found under the Theme Typography option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"317\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.6-Theme-Typograpy.jpg\" alt=\"Theme Typography\" class=\"wp-image-26665\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.6-Theme-Typograpy.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.6-Theme-Typograpy-300x130.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/1.6-Theme-Typograpy-138x60.jpg 138w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Add_Google_Fonts_Using_Code\"><\/span>2. Add Google Fonts Using Code<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>If you want to add your Google Fonts to WordPress without a plugin, you can add code to your theme files. You might want to <a href=\"https:\/\/rarathemes.com\/blog\/wordpress-child-theme\/\">create a child theme<\/a> for this so that you can revert the changes if you do not like them.&nbsp;<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"227\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.1-Select-this-style.jpg\" alt=\"Clicking Select this style\" class=\"wp-image-26666\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.1-Select-this-style.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.1-Select-this-style-300x93.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.1-Select-this-style-193x60.jpg 193w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p>2. Go to the <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">Google Fonts website<\/a> and find the font that you like. You will find the different styles of each font in the font\u2019s page. Click on the \u2018Select this style\u2019 button for the desired style. The font you selected will be saved for use in a special section. At the top right of the page, there is a button to view your selected fonts. It opens up a sidebar with two tabs. Click on the \u2018Embed\u2019 tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"393\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.2-Selected-family.jpg\" alt=\"Selected family\" class=\"wp-image-26667\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.2-Selected-family.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.2-Selected-family-300x162.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.2-Selected-family-111x60.jpg 111w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p>3. Copy this embed link and paste it in your header.php file, right before the &lt;body&gt; tag.&nbsp;<\/p>\n\n\n\n<p>4. If you don\u2019t want to deal with the hassles of working with theme files, then there is a handy plugin called <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">Insert Headers and Footers<\/a> that easily adds code to your theme files. You can use this plugin through its own section in the settings bar titled \u2018Insert Headers and Footers.\u2019 Simply paste the code in the \u2018Scripts in Header\u2019 box.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"265\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.3-Insert-Headers-and-Footers.jpg\" alt=\"Insert Headers and Footers\" class=\"wp-image-26668\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.3-Insert-Headers-and-Footers.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.3-Insert-Headers-and-Footers-300x109.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/2.3-Insert-Headers-and-Footers-165x60.jpg 165w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Add_Adobe_TypeKit_Fonts_to_WordPress\"><\/span>3. Add Adobe TypeKit Fonts to WordPress<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Adobe has another impressive library of custom fonts with a free version and a paid one. Before you start using their fonts, you need an account on the <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/fonts.adobe.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">Adobe Fonts<\/a> website. You can start browsing the available fonts from the <strong>Browse Fonts<\/strong> page.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Once you log in to the website, you can use the fonts you like by clicking on the &lt;\/&gt; button.&nbsp;<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"358\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.1-Adobe-Fonts.jpg\" alt=\"Adobe Fonts\" class=\"wp-image-26669\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.1-Adobe-Fonts.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.1-Adobe-Fonts-300x147.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.1-Adobe-Fonts-122x60.jpg 122w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p>2. To get the embed link, you need to create a web project on Adobe Fonts and add the chosen font to the project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"427\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.2-Project.jpg\" alt=\"Choosing font to the Project\" class=\"wp-image-26670\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.2-Project.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.2-Project-300x175.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.2-Project-103x60.jpg 103w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"428\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.3-Embed-Code.jpg\" alt=\"Embed Code\" class=\"wp-image-26671\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.3-Embed-Code.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.3-Embed-Code-300x176.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.3-Embed-Code-102x60.jpg 102w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p>3. Like the process with Google Fonts, you have to paste this embed link to your theme\u2019s header.php file before the &lt;body&gt; tag.<\/p>\n\n\n\n<p>4. You can avoid working directly with theme files by using <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">Insert Headers and Footers <\/a>plugin. Simply go to the Insert Headers and Footers option in the Settings bar and paste the embed code to the \u2018Scripts in Header\u2019 box. This will import the TypeKit fonts you have chosen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"276\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.4-Insert-Headers-and-Footers.jpg\" alt=\"Insert Headers and Footers\" class=\"wp-image-26672\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.4-Insert-Headers-and-Footers.jpg 730w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.4-Insert-Headers-and-Footers-300x113.jpg 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2020\/10\/3.4-Insert-Headers-and-Footers-159x60.jpg 159w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Some_Other_Custom_Fonts_Libraries\"><\/span>Some Other Custom Fonts Libraries<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>While Google Fonts and Adobe Fonts are some of the most popular databases for web fonts out there. But, there are many other font libraries that you can explore for downloading the right fonts for your WordPress website. Here are some that you can explore:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/www.templatemonster.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">TemplateMonster<\/a><\/li><li><a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/www.fontsquirrel.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Font Squirrel<\/a><\/li><li><a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/www.fontspring.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Fontspring<\/a><\/li><li><a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/www.1001freefonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">1001 Free Fonts<\/a><\/li><li><a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/www.fontfreak.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Font Freak<\/a><\/li><li><a href=\"https:\/\/www.abstractfonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Abstract Fonts<\/a><\/li><li><a aria-label=\" (opens in a new tab)\" class=\"rank-math-link\" href=\"https:\/\/www.myfonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MyFonts<\/a><\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Add_Other_Custom_Fonts_Using_Plugin\"><\/span>How to Add Other Custom Fonts Using Plugin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There is a handy plugin called <a aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\" href=\"https:\/\/wordpress.org\/plugins\/use-any-font\/\" target=\"_blank\">Use Any Font<\/a> that allows you to skip the hassles of adding custom fonts manually. It provides you with a simple interface through which you can add new fonts right from your dashboard and assign your custom fonts to desired elements.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Add_Other_Custom_Fonts_Manually\"><\/span>How to Add Other Custom Fonts Manually<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you want to add your desired fonts manually, then you will need to upload your font file to your WordPress directory. Use a child theme for this in order to build a layer of security in case you don\u2019t like the new look or some unwanted changes create bugs in your website. The child theme will allow you to revert the changes easily.&nbsp;<\/p>\n\n\n\n<p>Download your desired font from any font library like TemplateMonster. Then, go to <strong>wp-content\/themes\/your-theme\/fonts <\/strong>and upload it to the Fonts folder using an FTP client. If there is no Fonts folder, then create one.&nbsp;<\/p>\n\n\n\n<p>Once the font file is uploaded, you will need to import the font using your stylesheet. Add the following code to your <strong>style.css <\/strong>file:<\/p>\n\n\n\n<p>@font-face {&nbsp;<\/p>\n\n\n\n<p>font-family: Custom Font;&nbsp;<\/p>\n\n\n\n<p>src: url(http:\/\/yourwebsite.com\/wp-content\/themes\/twentynineteen\/fonts\/AguafinaScript-Regular.ttf);&nbsp;<\/p>\n\n\n\n<p>font-weight: normal;&nbsp;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>You need to replace the font-family with the name of the font you wish to import and URL with the URL of your website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>By following the above steps, you can easily add custom fonts to your <a href=\"https:\/\/rarathemes.com\/blog\/create-a-business-website-with-wordpress\/\">WordPress website<\/a> with minimum hassle. There are thousands of web fonts that you can use just from Google Fonts and Adobe Fonts databases. With the right choice of custom fonts, your website can gain a different charm, engage visitors better, and create a better aesthetic relevant to your topic.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learning to customize your website\u2019s typography is a pretty basic aspect of creating and running a website. It can change your website\u2019s whole feel and make a big difference in &hellip; <\/p>\n","protected":false},"author":15,"featured_media":28639,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_be_single_description":"","_be_image_uploader":0,"_be_meta_button_label":"","_be_meta_button_url":"","_be_meta_button_newtab":false,"_be_meta_rel_attribute":"","footnotes":""},"categories":[3],"tags":[],"class_list":["post-26658","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","latest_post"],"_links":{"self":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts\/26658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/comments?post=26658"}],"version-history":[{"count":0,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts\/26658\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/media\/28639"}],"wp:attachment":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/media?parent=26658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/categories?post=26658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/tags?post=26658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}