{"id":30172,"date":"2022-11-04T21:16:04","date_gmt":"2022-11-04T21:16:04","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/"},"modified":"2024-12-16T10:58:17","modified_gmt":"2024-12-16T10:58:17","slug":"how-to-change-the-font-in-wordpress-three-different-approaches","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/","title":{"rendered":"How to Change the Font in WordPress"},"content":{"rendered":"\n<p>Tutorial requirements:<\/p>\n\n\n\n<ul>\n<li>WordPress website;<\/li>\n\n\n\n<li>font plugin (optional);<\/li>\n\n\n\n<li>font from Google fonts. <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"terms\">First, a Look at the Terminology<\/h2>\n\n\n\n<ul>\n<li><strong>Web fonts:<\/strong> these are hosted on another website. To use them, you link them to your website.<\/li>\n\n\n\n<li><strong>Locally hosted fonts:<\/strong> these are hosted on your own website.<\/li>\n\n\n\n<li><strong>Web-safe fonts: <\/strong>most computers come with a limited set of pre-installed fonts. These will display fine for most visitors.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"options\">How to Change the Font in WordPress: the Options Available<\/h2>\n\n\n\n<p>There are several ways you can change the font on your WordPress site. The main ways are:<\/p>\n\n\n\n<ul>\n<li>Installing a plugin that gives you access to web fonts.<\/li>\n\n\n\n<li>Coding a web font into your WordPress theme.<\/li>\n\n\n\n<li>Using a locally hosted font that you will host on your website and then add to your WordPress theme.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"plugin\">How to Change the Font in WordPress Using a Plugin<\/h2>\n\n\n\n<p>This option is ideal for people uncomfortable with adding code to their website. All you need to do is install a special plugin that will easily give you access to web fonts such as Google Fonts.<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/olympus-google-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google Fonts <\/a>Typography is one such plugin and comes with a whole range of Google Fonts.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/google-fonts-typography-wordpress-plugin-1024x462.jpg\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/google-fonts-typography-wordpress-plugin-2x.png 2x\" alt=\"google fonts typography wordpress plugin\" class=\"wp-image-46418\"\/><\/figure>\n\n\n\n<p>You can install it in the usual way from your WordPress dashboard:<\/p>\n\n\n\n<ol>\n<li>Click <strong>Plugins &gt; Add new<\/strong>.<\/li>\n\n\n\n<li>Search for \u201c<strong>Google Fonts<\/strong>\u201d.<\/li>\n\n\n\n<li>Click<strong> Install Now<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Activate<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>Then access the plugin from the theme customizer by going to <strong>Appearance &gt; Customize<\/strong>. You should now see the settings for Google Fonts. Within this, you will see several sections:<\/p>\n\n\n\n<ul>\n<li><strong>Basic Settings:<\/strong> here, you can easily set the default font for body text, headings, and buttons.<\/li>\n\n\n\n<li><strong>Advanced Settings:<\/strong> this gives you more control over details such as branding, footer, and sidebar.&nbsp;<\/li>\n\n\n\n<li><strong>Front Loading:<\/strong> you can use this to speed up your website by setting it not to load any font weights you don\u2019t need to use.<\/li>\n\n\n\n<li><strong>Debugging:<\/strong> if a font is not displaying correctly, you might be able to fix it here.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1474\" height=\"776\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/fontspluginwordpressdashboard-ezgif.com-gif-to-webp-converter-1-1.webp\" alt=\"fonts plugin wordpress dashboard\" class=\"wp-image-46427\"\/><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"color\">How to change the font color?<\/h3>\n\n\n\n<p>Unfortunately, the free version of Google Fonts Typography doesn\u2019t allow you to change the font color. To do this, you need to buy the Pro version.&nbsp;<\/p>\n\n\n\n<p>However, changing the font color is possible by adding some CSS code. On the Customizer\u2019s home screen, click Additional CSS. You can then paste some code in there.&nbsp;<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n  color: blue;\n}\n\nh1 {\n  color: green;\n}\n<\/code><\/pre>\n\n\n\n<p>This will make the body text blue and the <strong>H1<\/strong> header green. If you want a more specific color, you can replace \u201c<strong>blue<\/strong>\u201d or \u201c<strong>green<\/strong>\u201d with any hex color code from <a href=\"https:\/\/htmlcolorcodes.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">this chart<\/a>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"coding\">How to Change the Font in WordPress by Coding It Into Your Theme?<\/h2>\n\n\n\n<p>This option is ideal for those happy with adding code to their WordPress theme. It could be a good option if you want to limit the number of plugins installed on your site.&nbsp;<\/p>\n\n\n\n<p>Before you edit your WordPress theme, you will need to create a child theme. If you are unsure how to do that, <a href=\"https:\/\/crocoblock.com\/blog\/wordpress-child-theme-foundations\/\" target=\"_blank\" rel=\"noreferrer noopener\">here are some instructions<\/a>. <\/p>\n\n\n\n<p>Once you have created your child theme, give it two files: <strong>style.css<\/strong> and <strong>functions.php<\/strong>.<\/p>\n\n\n\n<p>Here, we will use Google Fonts, as it\u2019s free and very commonly used.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"getlink\"><p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Choose a font and get the link.<\/strong><\/p><\/h3>\n\n\n\n<ol>\n<li>Go to <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google Fonts<\/a> and select the font family you want to use<\/li>\n\n\n\n<li>Click <strong>Select All Styles<\/strong>, and some code should appear<\/li>\n\n\n\n<li>Don&#8217;t select the whole code. Just select the bit that looks like this: <a href=\"https:\/\/fonts.googleapis.com\/css?family=Raleway\">https:\/\/fonts.googleapis.com\/css?family=Raleway<\/a><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"457\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/choose-a-font-1024x457.jpg\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/choose-a-font-2x.png 2x\" alt=\"choose a font\" class=\"wp-image-46420\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"enqueue\"><p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Enqueue the font(s).<\/strong><\/p><\/h3>\n\n\n\n<p>Open the <strong>functions.php<\/strong> file and past this code, replacing <a href=\"https:\/\/fonts.googleapis.com\/css?family=Raleway\">https:\/\/fonts.googleapis.com\/css?family=Raleway<\/a> with the code you got from Google Fonts:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function add_google_fonts() {\nwp_enqueue_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Raleway', false);\n}\nadd_action( 'wp_enqueue_scripts', 'add_google_fonts' );\n<\/code><\/pre>\n\n\n\n<p>This will enqueue the style from the servers of Google Fonts. If you ever want to add more fonts at a later date, just amend that one line of code like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;fonts.googleapis.com\/css?family=Raleway|Merriweather<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add\"><p class=\"style-title-numecal\"><b><span>3<\/span> Step<\/b> <strong>\u2014 Add the font(s) to the stylesheet.<\/strong><\/p><\/h3>\n\n\n\n<p>Before using the font on your site, you must add it to the stylesheet.<\/p>\n\n\n\n<p>To do this, open style.css, where you can add CSS code to style specific elements with your chosen font(s). <\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n font-family: 'Raleway', sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather 'Raleway', serif;\n}\n<\/code><\/pre>\n\n\n\n<p>This code will make the headings use <strong>Merriweather font<\/strong>, but the main body text will use <strong>Raleway font<\/strong>.<\/p>\n\n\n\n<p>Save the stylesheet file and view your website to ensure everything appears as it should. If the fonts are not displaying correctly, you might need to clear your web browser&#8217;s cache.<\/p>\n\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">If you still have problems, ensure there aren\u2019t fonts further down in the stylesheet overriding the fonts you added. Instead, put your new CSS code at the bottom of the stylesheet to remedy this. Or an even better approach is to modify existing CSS font code with your new fonts.<\/p><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"backup\"><p class=\"style-title-numecal\"><b><span>4<\/span> Step<\/b> <strong>\u2014 Add a backup font.<\/strong><\/p><\/h3>\n\n\n\n<p>Occasionally, a particular font won\u2019t display for somebody viewing your site. There can be various reasons, such as viewing it on an old device or using a slow internet connection. Or sometimes, the provider of the web font might be having technical problems.<\/p>\n\n\n\n<p>But this is why it\u2019s good to have a backup font, just in case. And we can do that by using one of the web-ready fonts that most visitors already have on their devices. To do this, edit the CSS code in this way:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n font-family: 'Raleway', Helvetica, sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}\n<\/code><\/pre>\n\n\n\n<p>By doing this, the website will display your chosen web fonts when possible &#8211; in this example, Raleway for the body and Merriweather for the headings. But if those cannot be displayed, visitors will see Helvetica and Georgia instead.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"hosting\">How to Change the Font in WordPress by Hosting the Font on Your Website<\/h2>\n\n\n\n<p>There are various reasons why you might want to host the font on your own website. For example, if you are concerned about the potential security issues of using web fonts or don\u2019t have the budget to pay for a premium fonts plugin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"files\"><p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Adding the font files to your website.<\/strong><\/p><\/h3>\n\n\n\n<ul>\n<li>Go to <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google Fonts<\/a>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/google-fonts-1024x469.jpg\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/google-fonts-2x.png 2x\" alt=\"google fonts\" class=\"wp-image-46422\"\/><\/figure>\n\n\n\n<ul start=\"2\">\n<li>Find the fonts family you want to use and click it.<\/li>\n\n\n\n<li>Click <strong>Download Family<\/strong>.<\/li>\n\n\n\n<li>Unzip the font file on your computer.<\/li>\n\n\n\n<li>Delete any font weights you don\u2019t want to use.<\/li>\n\n\n\n<li>Go to <a href=\"https:\/\/convertio.co\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Convertio<\/a> to convert the files to <strong>.woff<\/strong> format and download them.<\/li>\n\n\n\n<li>Create a child theme of your WordPress theme.<\/li>\n\n\n\n<li>Access the server files for your website and to <em>wp-content\/themes\/themename<\/em> (where \u201cthemename\u201d is the name of your particular WordPress theme).<\/li>\n\n\n\n<li>Create a subfolder called \u201c<strong>fonts<\/strong>\u201d and upload the <strong>.woff files<\/strong> there.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"stylesheet\"><p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Adding the font to the stylesheet.<\/strong><\/p><\/h3>\n\n\n\n<p>In the WordPress dashboard, go to <strong>Appearance &gt; Theme File Editor<\/strong>, open style.css and paste in CSS code such as this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n font-family: \u2018Raleway';\n src: url( \u201cfonts\/Raleway-Medium.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \u2018Raleway';\n src: url( \u201cfonts\/Raleway-Bold.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: \u2018Merriweather';\n src: url( \u201cfonts\/Merriweather.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}\n<\/code><\/pre>\n\n\n\n<p>Of course, you will want to use your own choice of font names, not the ones I have used here. You can add as many as you like in this way.&nbsp;<\/p>\n\n\n\n<p>Then you can add the styling for the various elements of your text, for example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n font-family: 'Raleway', Helvetica, sans-serif;\n src: url( \u201c\/fonts\/Raleway-Medium.ttf\u201d );\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}\n<\/code><\/pre>\n\n\n\n<p>Once you\u2019ve done that, your locally hosted fonts should work with your <a href=\"https:\/\/crocoblock.com\/blog\/best-free-wordpress-themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress theme<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">FAQ<\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1657536994776\"><strong class=\"schema-faq-question\"><strong>How do I change the font in WordPress without plugins?<\/strong><\/strong> <p class=\"schema-faq-answer\"> Please see the section above titled <a href=\"#coding\">How to Change the Font in WordPress by Coding It Into Your Theme<\/a>. <\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1657537372102\"><strong class=\"schema-faq-question\"><strong>Can you change the font in a WordPress menu?<\/strong><\/strong> <p class=\"schema-faq-answer\">Yes. From your WordPress admin dashboard, go to Appearence u003e Customize u003e CSS. From there, you can paste in CSS code such as:<br\/>#main-nav ul a {<br\/>\u00a0\u00a0\u00a0\u00a0font-family: u0022Timesu0022, serif;<br\/>}<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1657537395617\"><strong class=\"schema-faq-question\"><strong>How do I change the font in the WordPress block editor?<\/strong><\/strong> <p class=\"schema-faq-answer\">You can change the font size in the Block Editor, but not the font style.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1657537403473\"><strong class=\"schema-faq-question\"><strong>What is the standard font for WordPress?<\/strong><\/strong> <p class=\"schema-faq-answer\">If you are using the default Twenty Twenty-Two WordPress theme, this uses the <strong>Source Serif Pro<\/strong> for headings and an easy-to-read <strong>sans-serif <\/strong>font.\u00a0<\/p> <\/div> <\/div>\n\n\n\n<p>So, now you know how to change the font in WordPress. We have covered several different ways of doing so. You can install a plug that gives you access to web fonts. You can add CSS code to your WordPress theme. Alternatively, you can use a locally hosted font if the other methods do not suit you.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes, you might want to change the default font that comes with your WordPress theme. There are several ways you can do this, and here we will look at each. If you like tinkering around with CSS code, you can do it that way. Or, if that\u2019s not your thing, you can easily change the font using a plugin. <\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[349,269],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Change WordPress Font | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn three different approaches of how to change the WordPress font without any difficulties.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Change WordPress Font | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn three different approaches of how to change the WordPress font without any difficulties.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-16T10:58:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/google-fonts-typography-wordpress-plugin-1024x462.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/\",\"name\":\"How to Change WordPress Font | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2022-11-04T21:16:04+00:00\",\"dateModified\":\"2024-12-16T10:58:17+00:00\",\"description\":\"Learn three different approaches of how to change the WordPress font without any difficulties.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657536994776\"},{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537372102\"},{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537395617\"},{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537403473\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Change the Font in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657536994776\",\"position\":1,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657536994776\",\"name\":\"u003cstrongu003eHow do I change the font in WordPress without plugins?u003c\/strongu003e\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\" Please see the section above titled u003ca href=u0022#codingu0022u003eHow to Change the Font in WordPress by Coding It Into Your Themeu003c\/au003e. \",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537372102\",\"position\":2,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537372102\",\"name\":\"u003cstrongu003eCan you change the font in a WordPress menu?u003c\/strongu003e\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes. From your WordPress admin dashboard, go to Appearence u003e Customize u003e CSS. From there, you can paste in CSS code such as:u003cbr\/u003e#main-nav ul a {u003cbr\/u003e\u00a0\u00a0\u00a0\u00a0font-family: u0022Timesu0022, serif;u003cbr\/u003e}\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537395617\",\"position\":3,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537395617\",\"name\":\"u003cstrongu003eHow do I change the font in the WordPress block editor?u003c\/strongu003e\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"You can change the font size in the Block Editor, but not the font style.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537403473\",\"position\":4,\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537403473\",\"name\":\"u003cstrongu003eWhat is the standard font for WordPress?u003c\/strongu003e\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"If you are using the default Twenty Twenty-Two WordPress theme, this uses the u003cstrongu003eSource Serif Prou003c\/strongu003e for headings and an easy-to-read u003cstrongu003esans-serif u003c\/strongu003efont.\u00a0\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Change WordPress Font | Crocoblock","description":"Learn three different approaches of how to change the WordPress font without any difficulties.","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:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/","og_locale":"en_US","og_type":"article","og_title":"How to Change WordPress Font | Crocoblock","og_description":"Learn three different approaches of how to change the WordPress font without any difficulties.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/","og_site_name":"Help Center","article_modified_time":"2024-12-16T10:58:17+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/12\/google-fonts-typography-wordpress-plugin-1024x462.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["WebPage","FAQPage"],"@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/","url":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/","name":"How to Change WordPress Font | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2022-11-04T21:16:04+00:00","dateModified":"2024-12-16T10:58:17+00:00","description":"Learn three different approaches of how to change the WordPress font without any difficulties.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657536994776"},{"@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537372102"},{"@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537395617"},{"@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537403473"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Change the Font in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657536994776","position":1,"url":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657536994776","name":"u003cstrongu003eHow do I change the font in WordPress without plugins?u003c\/strongu003e","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":" Please see the section above titled u003ca href=u0022#codingu0022u003eHow to Change the Font in WordPress by Coding It Into Your Themeu003c\/au003e. ","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537372102","position":2,"url":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537372102","name":"u003cstrongu003eCan you change the font in a WordPress menu?u003c\/strongu003e","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Yes. From your WordPress admin dashboard, go to Appearence u003e Customize u003e CSS. From there, you can paste in CSS code such as:u003cbr\/u003e#main-nav ul a {u003cbr\/u003e\u00a0\u00a0\u00a0\u00a0font-family: u0022Timesu0022, serif;u003cbr\/u003e}","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537395617","position":3,"url":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537395617","name":"u003cstrongu003eHow do I change the font in the WordPress block editor?u003c\/strongu003e","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"You can change the font size in the Block Editor, but not the font style.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537403473","position":4,"url":"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-change-the-font-in-wordpress-three-different-approaches\/#faq-question-1657537403473","name":"u003cstrongu003eWhat is the standard font for WordPress?u003c\/strongu003e","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"If you are using the default Twenty Twenty-Two WordPress theme, this uses the u003cstrongu003eSource Serif Prou003c\/strongu003e for headings and an easy-to-read u003cstrongu003esans-serif u003c\/strongu003efont.\u00a0","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/30172"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=30172"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=30172"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=30172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}