{"id":38,"date":"2019-12-16T09:57:03","date_gmt":"2019-12-16T09:57:03","guid":{"rendered":"https:\/\/test.zakratheme.com\/blog\/?p=38"},"modified":"2020-08-20T03:31:23","modified_gmt":"2020-08-20T03:31:23","slug":"how-to-add-custom-fonts-in-wordpress","status":"publish","type":"post","link":"https:\/\/zakratheme.com\/blog\/how-to-add-custom-fonts-in-wordpress\/","title":{"rendered":"How to Add Custom Fonts in WordPress?"},"content":{"rendered":"\n<p>Fonts enhance the look of your site. There are many sources to find appropriate fonts for your site like Google Fonts, Adobe Fonts, etc. There are various methods of adding your custom fonts on your site. You can choose anyone.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 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\" style=\"cursor:inherit\">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: #004846;color:#004846\" 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: #004846;color:#004846\" 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-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/zakratheme.com\/blog\/how-to-add-custom-fonts-in-wordpress\/#method-1-manually-add-google-fonts-in-themes-files\" >Method 1: Manually Add Google Fonts in Theme&#8217;s files.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/zakratheme.com\/blog\/how-to-add-custom-fonts-in-wordpress\/#method-2-directly-using-font-face\" >Method 2: Directly Using @font-face<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/zakratheme.com\/blog\/how-to-add-custom-fonts-in-wordpress\/#method-3-using-a-plugin\" >Method 3: Using a plugin.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/zakratheme.com\/blog\/how-to-add-custom-fonts-in-wordpress\/#method-4-enqueueing-fonts-%e2%80%93-the-correct-way\" >Method 4: Enqueueing Fonts &#8211; The Correct Way.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/zakratheme.com\/blog\/how-to-add-custom-fonts-in-wordpress\/#adding-fonts-using-typekit\" >Adding Fonts using Typekit<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"method-1-manually-add-google-fonts-in-themes-files\"><\/span><strong>Method 1: Manually Add Google Fonts in Theme&#8217;s files.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>First step<\/strong>: Create a child theme( Guide: <a href=\"https:\/\/docs.zakratheme.com\/en\/article\/how-to-add-custom-code-to-the-theme-using-child-theme-1ml5yot\/\"> How to create Child Theme<\/a> ).<\/p>\n\n\n\n<p><strong>Second step<\/strong>: Choose your required fonts from <a href=\"https:\/\/fonts.google.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Google fonts library<\/a>. Click on <em>Select this font<\/em>,  you can see embed code there.<br> It looks like this: <\/p>\n<\/div><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto&amp;display=swap\" rel=\"stylesheet\">\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2019\/12\/google-fonts-1024x499.png\" alt=\"\" class=\"wp-image-44\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2019\/12\/google-fonts-1024x499.png 1024w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2019\/12\/google-fonts-300x146.png 300w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2019\/12\/google-fonts-768x374.png 768w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2019\/12\/google-fonts.png 1349w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Google Fonts Embed Code.<\/figcaption><\/figure><\/div>\n\n\n\n<p><br>You need to add this above embed code inside the child theme&#8217;s  <strong>header.php<\/strong> after  <code>&lt;head&gt;<\/code> tag.<br> You can use this font on the child theme CSS file like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.h1{\nfont-family: 'Roboto', sans-serif;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"method-2-directly-using-font-face\"><\/span><strong>Method 2: Directly Using @font-face<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>It is a direct way. In this method, you need to download the font you like. The font should be in a web format. If you do not have a web format, Convert it here: <a href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" rel=\"nofollow noopener\" target=\"_blank\">Webfont Generator<\/a>. Create a new folder called &#8220;fonts&#8221; into your child theme and add your new formatted, web-ready fonts inside. <br> After that, load this new font in child theme&#8217;s style.css file like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n font-family: New Font;\n src: url(http:\/\/www.yourwebsite.com\/wp-content\/themes\/\/fonts\/your-new-font.ttf);\n font-weight: normal;\n }<\/code><\/pre>\n\n\n\n<p> Replace the font-family and URL with your own.<br> Finally, You need to configure which elements will use the new font. Add      your font using CSS like this: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.h1 site-title {\n font-family: \"New Font\", Arial, sans-serif;\n }<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"method-3-using-a-plugin\"><\/span><strong>Method 3: Using a plugin.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>It is the easiest method. There are various plugins like <strong>Easy Google Fonts<\/strong>, <strong>Google Fonts Typography<\/strong>, <strong>Custom Fonts<\/strong>, etc. <br> For example <strong>Easy Google Fonts plugin<\/strong>.<br> First, install and activate this plugin.Go to <strong>Appearance &gt; Customize &gt; Typography<\/strong>. You can control the typography of your site there. You can even create your own font control via dashboard settings.<br> Visit the documentation of the respective plugins for more detailed information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"method-4-enqueueing-fonts-%e2%80%93-the-correct-way\"><\/span><strong>Method 4: Enqueueing Fonts &#8211; The Correct Way.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>It is the best way of adding your fonts. <br> Add the below code into the child theme&#8217;s functions.php file( <a href=\"https:\/\/docs.zakratheme.com\/en\/article\/how-to-add-custom-code-to-the-theme-using-child-theme-1ml5yot\/\">Add code using a Child theme<\/a>). <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function add_google_fonts() {\n wp_register_style( 'custom-googlefonts', \/\/fonts.googleapis.com\/css?family=Open+Sans|Roboto');\n wp_enqueue_style( 'custom-googlefonts' );\n }\n add_action( 'wp_enqueue_scripts', 'add_google_fonts' );<\/code><\/pre>\n\n\n\n<p>You can add multiple fonts in the link above. Visit  <a href=\"https:\/\/fonts.google.com\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/fonts.google.com\/<\/a> and select the multiple fonts you like. You will see embed code there. You just need to copy the linked part only and paste in the above code. ( starting from \/\/fonts). In the above example, there are two fonts taken: Roboto and Open Sans. Similarly, you can add multiple fonts there.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"586\" height=\"598\" src=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2019\/12\/multiple-fonts.png\" alt=\"\" class=\"wp-image-45\" srcset=\"https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2019\/12\/multiple-fonts.png 586w, https:\/\/zakratheme.com\/blog\/wp-content\/uploads\/2019\/12\/multiple-fonts-294x300.png 294w\" sizes=\"(max-width: 586px) 100vw, 586px\" \/><figcaption>Selection of Multiple fonts.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Use this font using CSS like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> .h1 {\n font-family: \"Roboto\", Arial, sans-serif;\n }<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"adding-fonts-using-typekit\"><\/span><strong>Adding Fonts using Typekit<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p> First, you need to create a <a href=\"http:\/\/typekit.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Typekit <\/a>account and create a new kit. You need to select a font from Typekit library and add it to your kit. After that get the embed code for your kit. Now, install and activate Typekit Fonts for WordPress plugin. Paste the embed code on the plugin&#8217;s setting page going via <strong>Settings &gt; Typekit<\/strong> Fonts. <\/p>\n\n\n\n<p><br> Use font in CSS like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.h1 {\n font-family: \"Roboto\", Arial, sans-serif;\n }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Fonts enhance the look of your site. There are many sources to find appropriate fonts for your site like Google Fonts, Adobe Fonts, etc. There are various methods of adding your custom fonts on your site. You can choose anyone. Method 1: Manually Add Google Fonts in Theme&#8217;s files. First step: Create a child theme([&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":946,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"zakra_general_container_width":0,"zakra_general_content_width":0,"zakra_general_sidebar_width":0,"zakra_sticky_header":"customizer","zakra_header_main_area":true,"zakra_site_logo_width":0,"zakra_header_top_enabled":"customizer","zakra_header_top_style":"customizer","zakra_primary_menu_item_style":"customizer","zakra_page_header_text_color":"","zakra_page_header_layout":"customizer","zakra_page_title_bg":"","zakra_footer_widgets_bg_image":0,"zakra_page_title_bg_repeat":"customizer","zakra_page_title_bg_position":"customizer","zakra_page_title_bg_size":"customizer","zakra_page_title_bg_attachment":"customizer","zakra_breadcrumbs_enabled":"customizer","zakra_breadcrumbs_text_color":"","zakra_breadcrumbs_separator_color":"","zakra_breadcrumbs_link_color":"","zakra_breadcrumbs_link_hover_color":"","zakra_page_title_bg_image":0,"zakra_footer_widgets_enabled":"customizer","zakra_footer_column_layout_1_style":"customizer","zakra_footer_widgets_bg":"","zakra_footer_widgets_bg_repeat":"customizer","zakra_footer_widgets_bg_position":"customizer","zakra_footer_widgets_bg_size":"customizer","zakra_footer_widgets_bg_attachment":"customizer","zakra_footer_bar_enabled":"customizer","zakra_footer_bar_style":"customizer","zakra_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":null,"zakra_menu_item_hover_color":null,"zakra_menu_item_active_color":null,"zakra_menu_active_style":"","zakra_page_header":true,"_tgsc_single_post_sidebar":"sidebar-right","_tgsc_single_post_disable_author_box":false,"_tgsc_blog_last_modified_date":{"enable":true},"footnotes":""},"categories":[3],"tags":[],"class_list":["post-38","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial"],"_links":{"self":[{"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":1,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":18828,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/posts\/38\/revisions\/18828"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/media\/946"}],"wp:attachment":[{"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zakratheme.com\/blog\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}