{"id":3955,"date":"2023-01-29T16:02:03","date_gmt":"2023-01-29T16:02:03","guid":{"rendered":"https:\/\/devclouds.io\/blog\/?p=3955"},"modified":"2023-01-29T16:02:49","modified_gmt":"2023-01-29T16:02:49","slug":"how-to-add-custom-fonts-in-wordpress","status":"publish","type":"post","link":"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/","title":{"rendered":"How to Add Custom Fonts in WordPress"},"content":{"rendered":"\n

Hi guys, Today we are going to see, how to add custom fonts in WordPress website. Let\u2019s say you have a website And you want to change the default font on your WordPress Website You can do that easily by reading this article.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"fonts\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So after reading this article, You will be able to change your website\u2019s font, like this so let’s get started. Let\u2019s change the font on our site First, let\u2019s see our site, where we want to change our font.<\/p>\n\n\n\n

Change your font using the \u2018Customize\u2019 Option<\/h3>\n\n\n\n
<\/div>\n\n\n\n
\"default<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So this is the site, which I built using WordPress So to change the font, there are 2 methods The first method is to change your theme settings using the customize option So to change the font Let\u2019s go our site Let\u2019s click \u2018Customize\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Customize<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And it will take you to this page, Here you can see we have global option. Now for some themes, this option may not be available. So If you don\u2019t have this option, you can skip to the second method.<\/p>\n\n\n\n

okay Now to change the font, Click on \u2018Global\u2019 and click \u2018typography\u2019.<\/p>\n\n\n\n

Fonts Family Selection<\/h4>\n\n\n\n
<\/div>\n\n\n\n
\"typography<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now if you want to change the font for this part of the content. just click \u2018Base Typography\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"fonts<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And then select fonts Now you will get the list of all the available fonts, like this. Here you can choose the font you want I\u2019m going to select Karla.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"font<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And as you can see, the font of our website has been changed for this part.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"headings<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now go back and if you want to change the font for all the headings on your site Just click \u2018headings\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"poppins<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now select fonts and select the font you want I\u2019m going to select this one. And as you can see, the font has been changed for all the headings Now to save the changes, Let\u2019s Click \u2018Publish\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So now if we go back to our website And click \u2018Refresh\u2019. You can see that, we have changed the font on our website. So this is how you can change your font using the \u2018Customize\u2019 option on your theme.<\/p>\n\n\n\n

Okay, Now, some themes will not have the an option to change the font inside the \u2018Customize\u2019 menu. Let\u2019s say you have a theme.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"dont<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now if we go to \u2018customize\u2019, you can see that, we don\u2019t have any option to change the font. So now how will you change the font on this theme.<\/p>\n\n\n\n

Use a plugin to Add Custom Fonts in WordPress<\/h3>\n\n\n\n

Next, Let\u2019s go to the second method which is to use a plugin to change the font. Now using this method, you will be able to change the font on any theme In WordPress. So to change the font using this method, First, we need to install a plugin.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"plugin<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So to install the plugin, Let\u2019s go to our WordPress dashboard, Now go to \u2018Plugins\u2019 and click \u2018Add New\u2019. Here, search for \u2018Google font\u2019 And you will get this plugin. Now, this is the plugin which will help us to change our font. So to install this plugin Let\u2019s click \u2018Install\u2019 And then click \u2018Activate\u2019.<\/p>\n\n\n\n

So now we have successfully installed the plugin. Now to change the font using this plugin Let\u2019s go back to customize.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"google<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now if we click \u2018Refresh\u2019 You can see that, we have got a new element called \u2018Google Fonts\u2019. So let\u2019s click it And click \u2018Basic Settings\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"fonts<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And you will get this option Now if you want to change the font for paragraph of your content Just select fonts and then select the font you want I\u2019m going to select this font. As you can see, the font has been change for this part.<\/p>\n\n\n\n

And now, to change the font for all the headings. Just select headings fonts and select the font you want And as you can see, the heading font has been change. Now to save the changes, Let\u2019s click \u2018Publish\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"font<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So now if we go back to our site And click \u2018Refresh\u2019. You can see that, we have successfully changed the fonts on our site using a plugin.<\/p>\n\n\n\n

Debugging Option<\/h4>\n\n\n\n

Now for some themes, the font which you selected may not change on your site properly. So to make sure your font is change properly You need to enable an option.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Debugging\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So to do that Let\u2019s go back to \u2018Customize\u2019 And click \u2018Google Fonts\u2019. And then click \u2018Debugging\u2019 Now enable this option And click \u2018Publish\u2019. Once you have done this The font will be change properly on your site without any issue. So that\u2019s it guys This is how to add custom fonts in WordPress website. Now if you want to learn more about WordPress<\/a>, visit our blog page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Let\u2019s say you have a website And you want to change the default font on your WordPress Website.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3955","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"yoast_head":"\nHow to Add Custom Fonts in WordPress<\/title>\n<meta name=\"description\" content=\"How to Add Custom Fonts in WordPress | Change your font using the \u2018Customize\u2019 Option | Use a plugin to change the font\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Custom Fonts in WordPress\" \/>\n<meta property=\"og:description\" content=\"How to Add Custom Fonts in WordPress | Change your font using the \u2018Customize\u2019 Option | Use a plugin to change the font\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"The Official DevClouds Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-29T16:02:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-29T16:02:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devclouds.io\/blog\/wp-content\/uploads\/2023\/01\/Screenshot_2-45-1024x530.jpg\" \/>\n<meta name=\"author\" content=\"hammad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hammad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/\",\"url\":\"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/\",\"name\":\"How to Add Custom Fonts in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/devclouds.io\/blog\/#website\"},\"datePublished\":\"2023-01-29T16:02:03+00:00\",\"dateModified\":\"2023-01-29T16:02:49+00:00\",\"author\":{\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d\"},\"description\":\"How to Add Custom Fonts in WordPress | Change your font using the \u2018Customize\u2019 Option | Use a plugin to change the font\",\"breadcrumb\":{\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devclouds.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Custom Fonts in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devclouds.io\/blog\/#website\",\"url\":\"https:\/\/devclouds.io\/blog\/\",\"name\":\"The Official DevClouds Blogs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devclouds.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d\",\"name\":\"hammad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g\",\"caption\":\"hammad\"},\"url\":\"https:\/\/devclouds.io\/blog\/author\/hammad\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add Custom Fonts in WordPress","description":"How to Add Custom Fonts in WordPress | Change your font using the \u2018Customize\u2019 Option | Use a plugin to change the font","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:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Custom Fonts in WordPress","og_description":"How to Add Custom Fonts in WordPress | Change your font using the \u2018Customize\u2019 Option | Use a plugin to change the font","og_url":"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/","og_site_name":"The Official DevClouds Blogs","article_published_time":"2023-01-29T16:02:03+00:00","article_modified_time":"2023-01-29T16:02:49+00:00","og_image":[{"url":"https:\/\/devclouds.io\/blog\/wp-content\/uploads\/2023\/01\/Screenshot_2-45-1024x530.jpg"}],"author":"hammad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hammad","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/","url":"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/","name":"How to Add Custom Fonts in WordPress","isPartOf":{"@id":"https:\/\/devclouds.io\/blog\/#website"},"datePublished":"2023-01-29T16:02:03+00:00","dateModified":"2023-01-29T16:02:49+00:00","author":{"@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d"},"description":"How to Add Custom Fonts in WordPress | Change your font using the \u2018Customize\u2019 Option | Use a plugin to change the font","breadcrumb":{"@id":"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/devclouds.io\/blog\/how-to-add-custom-fonts-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devclouds.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Custom Fonts in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/devclouds.io\/blog\/#website","url":"https:\/\/devclouds.io\/blog\/","name":"The Official DevClouds Blogs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devclouds.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d","name":"hammad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g","caption":"hammad"},"url":"https:\/\/devclouds.io\/blog\/author\/hammad\/"}]}},"_links":{"self":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/comments?post=3955"}],"version-history":[{"count":2,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3955\/revisions"}],"predecessor-version":[{"id":3973,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3955\/revisions\/3973"}],"wp:attachment":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/media?parent=3955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/categories?post=3955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/tags?post=3955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}