{"id":15371,"date":"2021-12-16T15:47:32","date_gmt":"2021-12-16T15:47:32","guid":{"rendered":"https:\/\/newblog.siteground.com\/en\/?p=15371"},"modified":"2025-03-31T07:27:08","modified_gmt":"2025-03-31T07:27:08","slug":"how-to-change-fonts-in-wordpress","status":"publish","type":"post","link":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/","title":{"rendered":"How to Change Fonts in WordPress to Make Your Site Unique"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The days of a web ruled by white pages, black text, and blue links are fading into history. These days, if you want to get noticed your page has to \u201cPop\u201d. JavaScript, CSS, and images all add to the pop of your website. Fonts also add a lot to the distinctive look of your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike some of the other elements of your website though, fonts can be large blocks of data that &#8211; if not handled properly &#8211; can slow down the loading of your website. <a href=\"https:\/\/academy.siteground.com\/en\/core-web-vitals-complete-guide\/\r\" data-type=\"post\" data-id=\"14464\" target=\"_blank\" rel=\"noopener\">Speed is king these days<\/a> so while pop is important, you need to make sure you don\u2019t impact the speed of your site when using fonts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article we are going to look at fonts and how they relate to WordPress, how to change fonts in WordPress, how to use Google fonts within WordPress, and finally, we will take a look at how you can organize your fonts so that they make your WordPress site look good while not impacting the speed of your site.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So let\u2019s get to fonting, shall we?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-add-new-wordpress-fonts-to-your-site\"><\/span>How to add new WordPress fonts to your site<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Pick a font in the right format<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The first step you need to do when working with fonts, is to select your font and get it into your site. If you search around, you will find that there are a lot of free fonts available for use. These fonts come in a variety of formats. You need to make sure that when selecting a font, you pick one that is available in the right format. As with everything on the web, you\u2019ve got options and not all options are created equal.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>EOF: Embedded OpenType Fonts<br><\/strong><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This format is more compact OTF fonts.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>OTF: Open Type Fonts<br><\/strong><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These are the most commonly used web fonts.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>TTF: True Type Fonts<br><\/strong><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This is an older format developed in the 1980\u2019s by Microsoft and Apple.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>WOFF 1.0: Web Open Font Format<br><\/strong><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This format is broadly used for web pages and recommended by the W3C.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>WOFF 2.0: Web Open Font Format<br><\/strong><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This is a better option than WOFF 1.0 due to better compression abilities.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As of this writing, all formats were supported by the current version of all modern web browsers. (HINT: Internet Explorer is not a modern web browser.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All of the formats above will work, however, for performance sake, whenever possible, use <strong>WOFF2 fonts<\/strong>. Since they are compressed, they load faster.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Add the WordPress font to your site<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There are a few different ways you can add custom fonts to your theme. Let&#8217;s look at two options: how you can do it manually and how you can do it through themes and plugins.&nbsp;&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Option 1: Add fonts manually through the File Manager<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">First, let\u2019s look at the hard way. Loading it manually.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The first thing we need to do is locate a font. I pulled one from one of my personal sites but you can search around and find one you like.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next we need to upload the actual font file to our website. Since my test site is hosted on SiteGround, I use the SiteTools &gt; File Manager to do this.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I am using the current WordPress default theme, <a href=\"https:\/\/wordpress.org\/themes\/twentytwentyone\/\" target=\"_blank\" rel=\"noopener\">twentytwentyone<\/a>. So in that directory I create a directory named \u201cfonts\u201d and upload my font file there.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"592\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/1-1-1024x592.jpg\" alt=\"\" class=\"wp-image-15373\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we need to tell our theme that it has a new font to work with. We do this with a @font-face section in our stylesheet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>@font-face {<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;<em>&nbsp;&nbsp;font-family: &#8220;ace_sansbold&#8221;;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;<em>src: url(&#8216;fonts\/acesans-bold-webfont.woff2&#8217;)&nbsp; format(&#8216;woff2&#8217;);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;<em>&nbsp;&nbsp;font-weight: normal;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>&nbsp;&nbsp;&nbsp;&nbsp;font-style: normal;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>}<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This tells our theme that there is a new font family named ace_sansbold and it can be loaded from fonts\/acesans-bold-webfont.woff2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s all fine and good but just having a font doesn\u2019t make any difference, we need to apply the font. I want this font used in my site\u2019s title. To do that we find the style selector used for that and change it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In twentytwentyone, that is the <em>.site-title selector<\/em>. By default it looks like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>.site-title {<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>color: var(&#8211;branding&#8211;color-link);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>font-family: var(&#8211;branding&#8211;title&#8211;font-family);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>font-size: var(&#8211;branding&#8211;title&#8211;font-size-mobile);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>letter-spacing: normal;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>text-transform: var(&#8211;branding&#8211;title&#8211;text-transform);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>line-height: var(&#8211;global&#8211;line-height-heading);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>margin-bottom: calc(var(&#8211;global&#8211;spacing-vertical) \/ 6);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>}<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We want to make one change. We want to change the font-family line to this.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>font-family: &#8220;ace_sansbold&#8221;;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This will tell our theme to use our new font instead of the one selected in the Theme customizer. The final will look like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>.site-title {<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>color: var(&#8211;branding&#8211;color-link);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em><span class=\"has-inline-color has-vivid-cyan-blue-color\">font-family: &#8220;ace_sansbold<\/span>&#8220;;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>font-size: var(&#8211;branding&#8211;title&#8211;font-size-mobile);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>letter-spacing: normal;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>text-transform: var(&#8211;branding&#8211;title&#8211;text-transform);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>line-height: var(&#8211;global&#8211;line-height-heading);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>margin-bottom: calc(var(&#8211;global&#8211;spacing-vertical) \/ 6);<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>}<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what my site title looked like before I added the font.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"394\" height=\"172\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/2-1.jpg\" alt=\"\" class=\"wp-image-15374\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After I followed the instructions above, it looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"418\" height=\"205\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/3-1.jpg\" alt=\"\" class=\"wp-image-15375\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Option 2: Add and edit fonts through themes and plugins<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Ok, we did it the hard way, now let\u2019s dive in the straightforward way, that is to take advantage of the themes and plugins to add fonts to your site easily.&nbsp;<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">How to add fonts using the Theme Editor<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Most modern themes have some way of adding fonts in and assigning them to parts of the site. I use the Astra WordPress theme on one of my sites and it comes with a feature called \u201cCustom Fonts\u201d. Instead of having to manually apply CSS and upload files, I am presented with a simple form that allows me to add or edit fonts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"858\" height=\"1024\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/4-1-858x1024.jpg\" alt=\"\" class=\"wp-image-15376\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once I save it, everything is automagically handled for me. Not only is the font placed where it should be and readily accessible, but the new fonts now appear in my Theme Editor, ready for me to use. No hacking CSS!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"496\" height=\"544\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/5-1.jpg\" alt=\"\" class=\"wp-image-15377\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As a bonus, Astra comes ready for me to use any of the <a rel=\"noopener\" href=\"https:\/\/fonts.google.com\/?preview.size=64&amp;preview.layout=row\" target=\"_blank\">Google Fonts<\/a>. They are already programmed in and ready for me to use.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">How to add fonts using WordPress Font Plugins<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">If your current WordPress theme doesn\u2019t include fonts out of the box, there are still options as freemium plugins.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/plugins\/olympus-google-fonts\/\"><em><strong>Fonts Plugin<\/strong><\/em><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;<em>Fonts Plugin<\/em>&#8221; gives you all of the Google fonts ready to use in WordPress. Additionally, it will let you enter in your Adobe API key if you have one, to use all of the Adobe fonts as well.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One of the things this plugin won\u2019t do is allow you to upload custom fonts like described above. The pro version may allow you to do that, but the documentation is unclear on this point.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One really nice feature of this plugin is that it gives you a new Gutenberg block called a \u201cGoogle Fonts\u201d block. This is an extension of the Paragraph block and it gives you the option to select a font for the block. Changing fonts for a text element in Gutenberg is difficult to say the least. It\u2019s nice to see someone figuring that out.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are other plugins that you can use to add fonts to your existing WordPress website theme. Take a quick look at the <a href=\"https:\/\/wordpress.org\/plugins\/search\/font\/\" target=\"_blank\" rel=\"noopener\">WordPress Plugin Repository<\/a> and you\u2019ll find several that will do the job.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-change-fonts-in-the-theme-customizer\"><\/span><strong>How to change fonts in the Theme Customizer<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Some WordPress themes have font selectors for different parts of your page or site.&nbsp;By default, twentytwentyone does not, but as shown above, Astra does. In Astra, the \u201cGlobal\u201d option has a \u201cTypography\u201d option. Clicking into Typography, you are presented with selectors to allow you to set different fonts and weights for things like:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Body<br><\/li><li>Headings (H1-H6)<br><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"505\" height=\"561\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/6-1.jpg\" alt=\"\" class=\"wp-image-15378\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This gives you broad control over the fonts that are displayed on your site. Different themes and plugins will add other options to the Theme Customizer to allow you more fine-grain control over what fonts are used where. A good example of this is the <em>Font Plugin<\/em> described above. It adds a section to the Theme Customizer for twentytwentyone to allow users to select and assign fonts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can pick fonts, weights, and sizes for most of the standard elements. For instance, above we manually replaced the font family for the .site-title selector. Using the <em>Font Plugin<\/em>, it is as simple as going to <strong>Advanced Settings &gt; Branding<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"528\" height=\"520\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/7-1.jpg\" alt=\"\" class=\"wp-image-15379\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">There you can select the Site Title Typography options.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"bonus-how-to-keep-fonts-from-slowing-your-site-down\"><\/span><strong>Bonus: How to keep fonts from slowing your site down<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ve talked a lot about how to get fonts into your system and use them. Fonts, however, are just one more thing that a browser has to load to view your site. Things a browser has to load are just things that can slow it down. How can you deal with this? The solution is to preload your font files. Thankfully, if you host your website with SiteGround, you have access to the <a href=\"https:\/\/www.siteground.com\/wordpress-plugins\/siteground-optimizer\" target=\"_blank\" rel=\"noopener\">SiteGround Optimizer plugin<\/a> which will make this task for you really straightforward. If you click through to the Optimizer <strong>Settings &gt; Frontend &gt; General<\/strong> you will find the \u201c<strong>Fonts Preloading<\/strong>\u201d feature.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"697\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/8-1-1024x697.jpg\" alt=\"\" class=\"wp-image-15380\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This option is a little different than most of the other options in the plugin because it is not an on or off, you have to enter the URL to your font so they can be preloaded.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In our case, the URL would be <em>https:\/\/example.com\/wp-content\/themes\/twentytwentyone\/fonts\/acesans-bold-webfont.woff2<\/em>. We enter that URL in and click <strong>Confirm<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"434\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/9-1-1024x434.jpg\" alt=\"\" class=\"wp-image-15381\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This will insert the proper link tag with rel=\u201dpreload\u201d in it so that the font file is the first thing that is loaded. You can see this by opening your website in a different browser, one that you are not logged into, visiting the page, and then click Inspect and Network. Then reload the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>&lt;link&nbsp;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;<em>&nbsp;rel=&#8221;preload&#8221;&nbsp;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;<em>as=&#8221;font&#8221;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;<em>href=&#8221;https:\/\/example.com\/wp-content\/themes\/twentytwentyone\/fonts\/acesans-bold-webfont.woff2&#8243;&nbsp;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;<em>Crossorigin<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\/&gt;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The first entry is the actual page you requested but the second entry will be the font file. It gets loaded as the first asset.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"367\" height=\"457\" src=\"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/10-1.jpg\" alt=\"\" class=\"wp-image-15382\" \/><\/figure>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--important\"><h3 class=\"title title--regular title--size-medium title--weight-bold color-darkest\"><strong>Important Tip:<\/strong><\/h3><p class=\"text text--size-medium color-darkest\">Only preload the most common font files you use. If you preload all of your font files, you will end up slowing your site back down. One, maybe two font files preloaded should be good enough to get your site up and running.<\/p><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"wrap-up\"><\/span>Wrap Up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Fonts are a good way to make your site look distinctive. Used sparingly they can set your site apart without significantly impacting its performance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As with all good things, less is more. Too many fonts will slow your site down and also make your site more difficult for your users to read. The end results are the same in both cases, users bounce to the next site, so, as with everything, use website fonts wisely and make sure you keep them optimized.<\/p>\n\n\n<p>[subscribe_cta]<\/p>","protected":false},"excerpt":{"rendered":"<p>The days of a web ruled by white pages, black text, and blue links are fading into history. These days, if you want to get noticed your page has to \u201cPop\u201d. JavaScript, CSS, and images all add to the pop of your website. Fonts also add a lot to the distinctive look of your website. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How to Change Fonts in WordPress to Make Your Site Unique&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35,"featured_media":15383,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-15371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v28.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to change fonts in WordPress to Make Your Site Unique | SiteGround<\/title>\n<meta name=\"description\" content=\"\ud83d\udcdd The step-by-step on how to change fonts in WordPress, including Google fonts, and how you can optimize them to avoid slowing down the speed of your site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/academy.siteground.com\/en\/how-to-change-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 change fonts in WordPress to Make Your Site Unique\" \/>\n<meta property=\"og:description\" content=\"\ud83d\udcdd The step-by-step on how to change fonts in WordPress, including Google fonts, and how you can optimize them to avoid slowing down the speed of your site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"SiteGround\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/siteground\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-16T15:47:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-31T07:27:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/newblog.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/how_to_change_wp_fonts_fb-1200x630-1.png\" \/>\n<meta name=\"author\" content=\"Cal Evans\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to change fonts in WordPress to Make Your Site Unique\" \/>\n<meta name=\"twitter:description\" content=\"\ud83d\udcdd The step-by-step on how to change fonts in WordPress, including Google fonts, and how you can optimize them to avoid slowing down the speed of your site.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/newblog.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/how_to_change_wp_fonts_tw-1200x675-1.png\" \/>\n<meta name=\"twitter:creator\" content=\"@siteground\" \/>\n<meta name=\"twitter:site\" content=\"@siteground\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cal Evans\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/\"},\"author\":{\"name\":\"Cal Evans\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#\\\/schema\\\/person\\\/ac2ec9d82232836e1c87de042cfea852\"},\"headline\":\"How to Change Fonts in WordPress to Make Your Site Unique\",\"datePublished\":\"2021-12-16T15:47:32+00:00\",\"dateModified\":\"2025-03-31T07:27:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/\"},\"wordCount\":1812,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2021\\\/12\\\/how_to_change_wp_fonts_1200x600-1.jpg\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/\",\"name\":\"How to change fonts in WordPress to Make Your Site Unique | SiteGround\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2021\\\/12\\\/how_to_change_wp_fonts_1200x600-1.jpg\",\"datePublished\":\"2021-12-16T15:47:32+00:00\",\"dateModified\":\"2025-03-31T07:27:08+00:00\",\"description\":\"\ud83d\udcdd The step-by-step on how to change fonts in WordPress, including Google fonts, and how you can optimize them to avoid slowing down the speed of your site.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2021\\\/12\\\/how_to_change_wp_fonts_1200x600-1.jpg\",\"contentUrl\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2021\\\/12\\\/how_to_change_wp_fonts_1200x600-1.jpg\",\"width\":1200,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/how-to-change-fonts-in-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Change Fonts in WordPress to Make Your Site Unique\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/\",\"name\":\"SiteGround Academy\",\"description\":\"The SiteGround academy provides a wide variety of tips, tools, and resources related to WordPress, web performance, website optimization and site security.\",\"publisher\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#organization\",\"name\":\"SiteGround\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/01\\\/Siteground-Logo-on-white.jpg\",\"contentUrl\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/01\\\/Siteground-Logo-on-white.jpg\",\"width\":1200,\"height\":400,\"caption\":\"SiteGround\"},\"image\":{\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/siteground\",\"https:\\\/\\\/x.com\\\/siteground\",\"https:\\\/\\\/www.instagram.com\\\/siteground\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@siteground\"],\"description\":\"The SiteGround academy provides a wide variety of tips, tools, and resources related to WordPress, web performance, website optimization and site security.\",\"foundingDate\":\"2004-03-22\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"501\",\"maxValue\":\"1000\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/#\\\/schema\\\/person\\\/ac2ec9d82232836e1c87de042cfea852\",\"name\":\"Cal Evans\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6db3157414eef0b296f19e7ee76dffbe3280ba0e04d11c3a23c2db4523fd4948?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6db3157414eef0b296f19e7ee76dffbe3280ba0e04d11c3a23c2db4523fd4948?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6db3157414eef0b296f19e7ee76dffbe3280ba0e04d11c3a23c2db4523fd4948?s=96&d=mm&r=g\",\"caption\":\"Cal Evans\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/calevans\\\/\"],\"url\":\"https:\\\/\\\/academy.siteground.com\\\/en\\\/author\\\/calevans\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to change fonts in WordPress to Make Your Site Unique | SiteGround","description":"\ud83d\udcdd The step-by-step on how to change fonts in WordPress, including Google fonts, and how you can optimize them to avoid slowing down the speed of your site.","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:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to change fonts in WordPress to Make Your Site Unique","og_description":"\ud83d\udcdd The step-by-step on how to change fonts in WordPress, including Google fonts, and how you can optimize them to avoid slowing down the speed of your site.","og_url":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/","og_site_name":"SiteGround","article_publisher":"https:\/\/www.facebook.com\/siteground","article_published_time":"2021-12-16T15:47:32+00:00","article_modified_time":"2025-03-31T07:27:08+00:00","og_image":[{"url":"https:\/\/newblog.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/how_to_change_wp_fonts_fb-1200x630-1.png","type":"","width":"","height":""}],"author":"Cal Evans","twitter_card":"summary_large_image","twitter_title":"How to change fonts in WordPress to Make Your Site Unique","twitter_description":"\ud83d\udcdd The step-by-step on how to change fonts in WordPress, including Google fonts, and how you can optimize them to avoid slowing down the speed of your site.","twitter_image":"https:\/\/newblog.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/how_to_change_wp_fonts_tw-1200x675-1.png","twitter_creator":"@siteground","twitter_site":"@siteground","twitter_misc":{"Written by":"Cal Evans","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/"},"author":{"name":"Cal Evans","@id":"https:\/\/academy.siteground.com\/en\/#\/schema\/person\/ac2ec9d82232836e1c87de042cfea852"},"headline":"How to Change Fonts in WordPress to Make Your Site Unique","datePublished":"2021-12-16T15:47:32+00:00","dateModified":"2025-03-31T07:27:08+00:00","mainEntityOfPage":{"@id":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/"},"wordCount":1812,"commentCount":2,"publisher":{"@id":"https:\/\/academy.siteground.com\/en\/#organization"},"image":{"@id":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/how_to_change_wp_fonts_1200x600-1.jpg","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/","url":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/","name":"How to change fonts in WordPress to Make Your Site Unique | SiteGround","isPartOf":{"@id":"https:\/\/academy.siteground.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/how_to_change_wp_fonts_1200x600-1.jpg","datePublished":"2021-12-16T15:47:32+00:00","dateModified":"2025-03-31T07:27:08+00:00","description":"\ud83d\udcdd The step-by-step on how to change fonts in WordPress, including Google fonts, and how you can optimize them to avoid slowing down the speed of your site.","breadcrumb":{"@id":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/#primaryimage","url":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/how_to_change_wp_fonts_1200x600-1.jpg","contentUrl":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2021\/12\/how_to_change_wp_fonts_1200x600-1.jpg","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/academy.siteground.com\/en\/how-to-change-fonts-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/academy.siteground.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to Change Fonts in WordPress to Make Your Site Unique"}]},{"@type":"WebSite","@id":"https:\/\/academy.siteground.com\/en\/#website","url":"https:\/\/academy.siteground.com\/en\/","name":"SiteGround Academy","description":"The SiteGround academy provides a wide variety of tips, tools, and resources related to WordPress, web performance, website optimization and site security.","publisher":{"@id":"https:\/\/academy.siteground.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/academy.siteground.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/academy.siteground.com\/en\/#organization","name":"SiteGround","url":"https:\/\/academy.siteground.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/academy.siteground.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/01\/Siteground-Logo-on-white.jpg","contentUrl":"https:\/\/academy.siteground.com\/en\/wp-content\/uploads\/sites\/2\/2025\/01\/Siteground-Logo-on-white.jpg","width":1200,"height":400,"caption":"SiteGround"},"image":{"@id":"https:\/\/academy.siteground.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/siteground","https:\/\/x.com\/siteground","https:\/\/www.instagram.com\/siteground\/","https:\/\/www.youtube.com\/@siteground"],"description":"The SiteGround academy provides a wide variety of tips, tools, and resources related to WordPress, web performance, website optimization and site security.","foundingDate":"2004-03-22","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"501","maxValue":"1000"}},{"@type":"Person","@id":"https:\/\/academy.siteground.com\/en\/#\/schema\/person\/ac2ec9d82232836e1c87de042cfea852","name":"Cal Evans","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6db3157414eef0b296f19e7ee76dffbe3280ba0e04d11c3a23c2db4523fd4948?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6db3157414eef0b296f19e7ee76dffbe3280ba0e04d11c3a23c2db4523fd4948?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6db3157414eef0b296f19e7ee76dffbe3280ba0e04d11c3a23c2db4523fd4948?s=96&d=mm&r=g","caption":"Cal Evans"},"sameAs":["https:\/\/www.linkedin.com\/in\/calevans\/"],"url":"https:\/\/academy.siteground.com\/en\/author\/calevans\/"}]}},"_links":{"self":[{"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/posts\/15371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/comments?post=15371"}],"version-history":[{"count":1,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/posts\/15371\/revisions"}],"predecessor-version":[{"id":23505,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/posts\/15371\/revisions\/23505"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/media\/15383"}],"wp:attachment":[{"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/media?parent=15371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/categories?post=15371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/academy.siteground.com\/en\/wp-json\/wp\/v2\/tags?post=15371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}