{"id":28035,"date":"2024-08-30T15:54:43","date_gmt":"2024-08-30T10:24:43","guid":{"rendered":"https:\/\/www.wpoven.com\/blog\/?p=28035"},"modified":"2024-08-30T15:54:47","modified_gmt":"2024-08-30T10:24:47","slug":"how-to-change-fonts-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.wpoven.com\/blog\/how-to-change-fonts-in-wordpress\/","title":{"rendered":"How To Change Fonts In WordPress 2024 (FAST &#038; Easy!)"},"content":{"rendered":"\n<p class=\"justify\">It might seem like a small detail, but WordPress fonts can significantly impact the user experience.<\/p>\n\n\n\n<p class=\"justify\">Fonts are so powerful that choosing the right one can enhance the look and feel of your website, while a poor choice can detract from it. That&#8217;s how important they are in your website design and brand identity.<\/p>\n\n\n\n<p class=\"justify\">So, when you&#8217;ve selected a particular font, you also need to know how to change fonts in WordPress.<\/p>\n\n\n\n<p class=\"justify\">There are multiple ways to change fonts in WordPress, depending on your theme. You may need to use plugins or make changes manually.<\/p>\n\n\n\n<p class=\"justify\">Whatever the case, we will discuss every aspect in this blog so you can choose the method that best fits your needs. Let&#8217;s get straight to the point without further delay.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading myh2\">What are Fonts in WordPress?<\/h2>\n\n\n\n<p class=\"justify\">Web fonts or simply fonts are styling of text characters on your website that can change the look, feel, and tone of the website design.<\/p>\n\n\n\n<p class=\"justify\">These are mainly provided by big tech giants like Google or&nbsp; Adobe and are stored in the cloud, unlike regular fonts that you download to your computer.<\/p>\n\n\n\n<p class=\"justify\">It means, that when someone visits your website, these fonts automatically get loaded from the cloud and appear on your site within seconds if configured and set correctly.<\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<div class=\"wp-block-group box is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading myh2\">Why do you need to change Fonts in WordPress?<\/h2>\n\n\n\n<p class=\"justify\">If you are wondering why even it matters to change Fonts in WordPress, here are some reasons that you might also do it.<\/p>\n\n\n\n<ul class=\"justify\">\n<li><strong>Fonts Are Crucial for Website Design<\/strong>: Fonts play a significant role in shaping the overall look and feel of your WordPress site.<\/li>\n\n\n\n<li><strong>Impact on User Experience<\/strong>: If the font is difficult to read, visitors may leave your site quickly, reducing engagement and retention.<\/li>\n\n\n\n<li><strong>Fonts Reflect Brand Identity<\/strong>: The choice of font can convey different messages about your brand. For example, certain fonts can make your site appear more professional or more casual, depending on your branding goals.<\/li>\n\n\n\n<li><strong>Default Fonts in WordPress Themes<\/strong>: Most WordPress themes come with pre-set fonts, sizes, and colors. However, you may want to customize these defaults to better suit your design needs or preferences.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<div class=\"wp-block-group fre-pros-box is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading myh2\">How to change Fonts in WordPress? (Easy 6 ways)<\/h2>\n\n\n\n<p class=\"justify\">There are multiple ways to change fonts in WordPress, depending on the theme you use. Some premium themes have a built-in font manager with Google Fonts automatically loaded and may allow you to enable all Google font subsets.<\/p>\n\n\n\n<p class=\"justify\">For other themes, you can use the customizer settings to change the default fonts. If you are using a free full-site editing block theme, such as Twenty Twenty-Two, you can add fonts by editing the theme.json file. Alternatively, you can install a font manager plugin, use the Gutenberg block editor, or add fonts manually.<\/p>\n\n\n\n<p class=\"justify\">Check out these proven and easy ways to change fonts in WordPress<\/p>\n\n\n\n<ul>\n<li><a href=\"#Changing-Fonts-in-WordPress-using-the-Theme-customizer\" data-type=\"internal\" data-id=\"#Changing-Fonts-in-WordPress-using-the-Theme-customizer\">Changing Fonts in WordPress using the Theme customizer<\/a><\/li>\n\n\n\n<li><a href=\"#Changing-Fonts-in-WordPress-using-Full-site-editor\" data-type=\"internal\" data-id=\"#Changing-Fonts-in-WordPress-using-Full-site-editor\">Changing Fonts in WordPress using Full site editor<\/a><\/li>\n\n\n\n<li><a href=\"#Changing-Fonts-in-WordPress-using-Block-Editor\" data-type=\"internal\" data-id=\"#Changing-Fonts-in-WordPress-using-Block-Editor\">Changing Fonts in WordPress using Block Editor<\/a><\/li>\n\n\n\n<li><a href=\"#Changing-Fonts-in-WordPress-using-WordPress-Plugin\" data-type=\"internal\" data-id=\"#Changing-Fonts-in-WordPress-using-WordPress-Plugin\">Changing Fonts in WordPress using WordPress Plugin<\/a><\/li>\n\n\n\n<li><a href=\"#Adding-Custom-Fonts-in-WordPress-Manually\" data-type=\"internal\" data-id=\"#Adding-Custom-Fonts-in-WordPress-Manually\">Adding Custom Fonts in WordPress Manually<\/a><\/li>\n\n\n\n<li><a href=\"#Adding-custom-fonts-in-WordPress-Full-Site-Editing-Theme\" data-type=\"internal\" data-id=\"#Adding-custom-fonts-in-WordPress-Full-Site-Editing-Theme\">Adding custom fonts in WordPress Full Site Editing Theme<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"Changing-Fonts-in-WordPress-using-the-Theme-customizer\">1. Changing Fonts in WordPress using the Theme customizer<\/h3>\n\n\n\n<p class=\"justify\">The easiest and fastest way to change fonts is by using the WordPress theme customizer. This build tool will let you make changes to the appearance of your website and see it in real-time.<\/p>\n\n\n\n<p class=\"justify guide-highlight-section green-section\"><strong>Note<\/strong>: In case, the customizer option is not available or missing, your theme might use full site editing. In this case, you\u2019ll need to try a different method or switch to another theme.<\/p>\n\n\n\n<p class=\"justify\">In this tutorial for your convenience, we are going to use Astra, since it is the most popular and widely used WordPress theme available.<\/p>\n\n\n\n<p class=\"justify\">But you also keep in mind that the options might be different depending on your theme. Generally, you should look for options like&nbsp; \u2018<strong>Font<\/strong>\u2019 or \u2018<strong>Typography<\/strong>\u2019 in the customizer option.<\/p>\n\n\n\n<p class=\"justify\">But for now, let&#8217;s see how you can Change Fonts in WordPress:<\/p>\n\n\n\n<p><strong>1.1.<\/strong> <strong>Open the Customizer<\/strong>:<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&#8211; Go to your WordPress dashboard.<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&#8211; Navigate to <strong>Appearance &gt; Customize<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-97.png\" alt=\"Opening Theme Customiser\" class=\"wp-image-28057\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-97.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-97-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-97-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Opening Theme Customiser<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>1.2. Access the Global Settings:<\/strong><\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&#8211; This will open the WordPress theme customizer.<\/p>\n\n\n\n<p class=\"justify\">&nbsp;&nbsp;&nbsp;&#8211; In the <strong>Astra<\/strong> theme, find and click on the \u2018<strong>Global<\/strong>\u2019 section to access options for changing the overall style of your website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-102.png\" alt=\"Access the Global Settings\" class=\"wp-image-28063\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-102.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-102-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-102-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Access the Global Settings<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>1.3.<\/strong> <strong>Select Typography Settings:<\/strong><\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&#8211; You\u2019ll see options like \u2018<strong>Typography,\u2019 \u2018Colors,\u2019 \u2018Container,<\/strong>\u2019 and \u2018<strong>Buttons.<\/strong>\u2019<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&#8211; Click on \u2018<strong>Typography<\/strong>.\u2019<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"908\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-96.png\" alt=\"Open Topography Settings\" class=\"wp-image-28056\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-96.png 908w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-96-300x169.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-96-768x433.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Open Topography Settings<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>1.4.<\/strong> <strong>Choose a Font Preset<\/strong>:<\/p>\n\n\n\n<p class=\"justify\">&nbsp;&nbsp;&nbsp;&#8211; Under the \u2018<strong>Presets<\/strong>\u2019 section, you can pick different font combinations with your theme. Hover over each preset to see the font combination (e.g., \u2018Montserrat and Source Sans Pro\u2019).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-105.png\" alt=\"Choose a Font Preset\" class=\"wp-image-28066\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-105.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-105-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-105-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Choose a Font Preset<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&#8211; Click on a preset to apply it to your entire website.<\/p>\n\n\n\n<p><strong>1.5.<\/strong> <strong>Customize Fonts for Individual Elements:<\/strong><\/p>\n\n\n\n<p class=\"justify\">&nbsp;&nbsp;&nbsp;&#8211; To change fonts for specific elements (like body text or headings), select a font from the \u2018<strong>Font Family<\/strong>\u2019 dropdown menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-93.png\" alt=\"Customize Fonts for Individual Elements\" class=\"wp-image-28052\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-93.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-93-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-93-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Customize Fonts for Individual Elements<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"justify\">&nbsp;&nbsp;&nbsp;&#8211; You can use different fonts for body text, headings, or even for each heading level <strong>(e.g., H1, H2)<\/strong>.<\/p>\n\n\n\n<p><strong>1.6.<\/strong> <strong>Adjust Additional Font Settings:<\/strong><\/p>\n\n\n\n<p class=\"justify\">&nbsp;&nbsp;&nbsp;&#8211; You can also adjust font size, weight, and other variants.<\/p>\n\n\n\n<p><strong>1.7.<\/strong> <strong>Save Your Changes:<\/strong><\/p>\n\n\n\n<p class=\"justify\">&nbsp;&nbsp;&nbsp;&#8211; When you\u2019re finished, click <strong>\u2018Publish\u2019<\/strong> or <strong>\u2018Update\u2019<\/strong> to save the changes.<\/p>\n\n\n\n<p><strong>1.8.<\/strong> <strong>Preview Your Changes:<\/strong><\/p>\n\n\n\n<p class=\"justify\">&nbsp;&nbsp;&nbsp;&#8211; Visit your website to see the new font. For example, on our demo site, we changed the body font to <strong>Roboto<\/strong> and the heading font to <strong>Helvetica<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-104.png\" alt=\"Preview of Changes in the Font\" class=\"wp-image-28065\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-104.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-104-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-104-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Preview of Changes in the Font<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"justify guide-highlight-section green-section\"><strong>Note<\/strong>: Not all themes offer the same options as the Astra theme. If your theme doesn\u2019t have these settings, you might need to use a different method.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/app.wpoven.com\/users\/signup\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"273\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/07\/Managed-Hosting.png\" alt=\"WPOven\" class=\"wp-image-26984\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/07\/Managed-Hosting.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/07\/Managed-Hosting-300x80.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/07\/Managed-Hosting-768x205.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><\/a><\/figure>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"Changing-Fonts-in-WordPress-using-Full-site-editor\">2. Changing Fonts in WordPress using Full site editor <\/h3>\n\n\n\n<p class=\"justify\">Most WordPress themes come with preinstalled fonts that you can choose from. This feature is usually available in themes that support the full site editor (FSE).<\/p>\n\n\n\n<p class=\"justify\">If you are using a theme like <strong>Twenty Twenty-Two<\/strong>, you can change your site\u2019s font using the FSE.<\/p>\n\n\n\n<p class=\"justify\">If you&#8217;re unfamiliar with FSE, it allows you to customize your entire WordPress theme using blocks, similar to how you create or edit posts and pages in the WordPress editor.<\/p>\n\n\n\n<p class=\"justify\">For this tutorial, we will use the <strong>Twenty Twenty-Two theme<\/strong>, Since this is available by default.<\/p>\n\n\n\n<p class=\"justify\"><strong>Step 1<\/strong>: Go to your WordPress admin panel and Navigate to <strong>Appearance &gt; Editor<\/strong>.<\/p>\n\n\n\n<p class=\"justify\"><strong>Step 2:<\/strong> In the full site editor, click the <strong>\u2018Styles\u2019 <\/strong>icon in the top right corner and Select the \u2018<strong>Typography\u2019<\/strong> option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-94.png\" alt=\"Changing Fonts using Full Site Editor\" class=\"wp-image-28054\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-94.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-94-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-94-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Changing Fonts using Full Site Editor<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"justify\"><strong>Step 3:<\/strong> Now, You can choose which elements to change, such as text or links.<\/p>\n\n\n\n<p class=\"justify\">&nbsp;&nbsp;&nbsp;&nbsp;For this example, select \u2018<strong>Text<\/strong>\u2019 as the element.<\/p>\n\n\n\n<p class=\"justify\"><strong>Step 4<\/strong>: Click on the<strong> \u2018FONT\u2019<\/strong> dropdown menu to select a new font.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-95.png\" alt=\"Selecting Font Family in Full Site Editor\" class=\"wp-image-28055\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-95.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-95-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-95-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Selecting Font Family in Full Site Editor<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"justify\"><strong>Step 5:<\/strong> When you\u2019re finished, click the <strong>\u2018Save\u2019<\/strong> button to apply the changes.<\/p>\n\n\n\n<p class=\"justify\"><strong>Step 6:<\/strong> You can add custom fonts to your WordPress site and then use the full site editor to change them.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"Changing-Fonts-in-WordPress-using-Block-Editor\">3. Changing Fonts in WordPress using Block Editor&nbsp;<\/h3>\n\n\n\n<p class=\"justify\">Since the introduction of block editor, things become easy and very handy to edit pages or blogs. With the block editor in WordPress, you can customize how your fonts look on your website.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s what you can do:<\/p>\n\n\n\n<ul class=\"justify\">\n<li><strong>Change Text Color:<\/strong> Adjust the color of your text and its background.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-90.png\" alt=\"Changing Fonts in WordPress using Block Editor\u00a0\" class=\"wp-image-28049\" style=\"aspect-ratio:2;width:840px;height:auto\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-90.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-90-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-90-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Changing Fonts in WordPress using Block Editor&nbsp;<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"justify\">\n<li><strong>Set Font Size and Style:<\/strong> Control the size and overall style (appearance) of your text. The appearance options usually include <strong>font-weight<\/strong> (like boldness), which depends on the font selected in your theme settings.<\/li>\n<\/ul>\n\n\n\n<ul class=\"justify\">\n<li><strong>Additional Text Formatting:<\/strong> You can also make text <strong>bold<\/strong> or <strong>italic<\/strong>, and choose how it is aligned (left, center, or right) within the block.<\/li>\n\n\n\n<li><strong>Highlight and Style Text<\/strong>: Highlight specific text, apply strikethrough, or add special text formatting.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-89.png\" alt=\"Highlight and Style Text\" class=\"wp-image-28048\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-89.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-89-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-89-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Highlight and Style Text<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"justify\">\n<li><strong>Insert Inline Elements<\/strong>: Add inline elements like code snippets and images directly within the text.<\/li>\n\n\n\n<li><strong>Use Subscript and Superscript<\/strong>: Add characters in subscript (below the line) or superscript (above the line) to your text.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"Changing-Fonts-in-WordPress-using-WordPress-Plugin\">4. Changing Fonts in WordPress using WordPress Plugin<\/h3>\n\n\n\n<p class=\"justify\">If you are using a generic or very basic WordPress theme, it might lack inbuilt fonts. In that case, you have to rely on WordPress plugins such as the Fonts Plugin or Google\u2019s Fonts Typography.&nbsp;<\/p>\n\n\n\n<p>Here are the steps you can follow:<\/p>\n\n\n\n<p><strong>Step 1: Install and Activate the Fonts Plugin&nbsp;&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"justify\">\n<li>Go to your WordPress dashboard and click on &#8220;<strong>Plugins<\/strong>&#8221; from the left menu.<\/li>\n\n\n\n<li>Click &#8220;<strong>Add New<\/strong>&#8221; at the top of the page, then search for &#8220;<strong>Fonts Plugin<\/strong>.&#8221;<\/li>\n\n\n\n<li>Once you find it, click the &#8220;<strong>Install Now<\/strong>&#8221; button and wait for it to install.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-99.png\" alt=\"Installing WordPress Fonts Plugin\" class=\"wp-image-28060\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-99.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-99-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-99-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Installing WordPress Fonts Plugin<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"justify\">\n<li>After installation, click &#8220;<strong>Activate<\/strong>&#8221; to enable the plugin on your site.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><strong>Step 2: Access the Fonts Plugin Quickstart Guide<\/strong>&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"justify\">\n<li>After activation, a quickstart guide will appear in your WordPress dashboard.<\/li>\n\n\n\n<li>You can enter your email address to receive a PDF guide with additional instructions.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Alternatively, click on the \u2018<strong>Customize Fonts<\/strong>\u2019 button to go directly to the customization options.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><strong>Step 3: Open the Customization Options&nbsp;&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"justify\">\n<li>When you click \u2018Customize Fonts,\u2019 the plugin\u2019s customization settings will be opened in your theme\u2019s Customizer.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-100.png\" alt=\"Fonts Plugin Settings\" class=\"wp-image-28061\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-100.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-100-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-100-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Fonts Plugin Settings<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul>\n<li>Here, you will find various options to change your site&#8217;s fonts.<\/li>\n<\/ul>\n\n\n\n<p><strong>Step 4: Open the Basic Settings&nbsp;<\/strong><\/p>\n\n\n\n<ul>\n<li>In the Customizer, find the \u2018<strong>Basic Settings<\/strong>\u2019 menu and click on it.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"362\" height=\"891\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-92.png\" alt=\"Google Fonts Basic Settings\" class=\"wp-image-28051\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-92.png 362w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-92-122x300.png 122w\" sizes=\"(max-width: 362px) 100vw, 362px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Google Fonts Basic Settings<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul>\n<li>This menu contains options for adjusting the fonts for different parts of your site.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"362\" height=\"781\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-101.png\" alt=\"Fonts Family in Basic Settings\" class=\"wp-image-28062\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-101.png 362w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-101-139x300.png 139w\" sizes=\"(max-width: 362px) 100vw, 362px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Fonts Family in Basic Settings<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 5: Customize Your Fonts&nbsp;&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"justify\">\n<li>Inside the \u2018Basic Settings\u2019 menu, you\u2019ll see options to change the fonts for your content, headings, and buttons.<\/li>\n\n\n\n<li>Click on each dropdown menu next to the text element (like &#8220;<strong>Content<\/strong>&#8221; or &#8220;<strong>Headings<\/strong>&#8220;).<\/li>\n<\/ul>\n\n\n\n<ul class=\"justify\">\n<li>Choose a font from the list that appears. You can preview how each font looks before applying it.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><strong>Step 6: Save Your Changes<\/strong><\/p>\n\n\n\n<ul class=\"justify\">\n<li>Once you\u2019ve made all your font choices, don\u2019t forget to click the \u2018Publish\u2019 button at the top to save your changes.<\/li>\n\n\n\n<li>The Fonts Plugin will automatically update your website with the new fonts, making your content look exactly how you want.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"Adding-Custom-Fonts-in-WordPress-Manually\">5. Adding Custom Fonts in WordPress Manually<\/h3>\n\n\n\n<p class=\"justify\">If you want to use custom fonts on your WordPress site, it\u2019s possible, but it does require some technical skills. You\u2019ll need to be comfortable editing theme files, have a basic understanding of how WordPress files are organized, and know some basic coding.<\/p>\n\n\n\n<p class=\"justify\">To do this, we will make changes to a few theme files and add some CSS (styling code). You\u2019ll also need a code editor that you prefer and an FTP program like FileZilla to access and edit the files on your website.<\/p>\n\n\n\n<p class=\"justify guide-highlight-section green-section\"><strong>Note:<\/strong> It&#8217;s highly recommended that you make these changes in a child theme, rather than the main theme files. This is because even a small mistake in editing the main theme files can potentially break your website.<\/p>\n\n\n\n<p class=\"justify\">If you want to add a custom font like Google\u2019s &#8220;<strong>Sevillana<\/strong>&#8221; to your WordPress site, follow these simple steps:<\/p>\n\n\n\n<p><strong>Step 1: Choose the Font on Google Fonts<\/strong><\/p>\n\n\n\n<p>1. Go to Google fonts website and search for &#8220;<strong>Sevillana<\/strong>.&#8221;<\/p>\n\n\n\n<p>2. Once you find it, select the font styles (like regular, bold, italic, etc.) you want to use on your site.<\/p>\n\n\n\n<p>3. Google Fonts will provide an embed code with a link that looks something like this:&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-91.png\" alt=\"Copying URL of Custom Fonts\" class=\"wp-image-28050\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-91.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-91-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-91-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Copying URL of Custom Fonts<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"round has-background\" style=\"background-color:#f0f0f0\"><code><strong>https:\/\/fonts.googleapis.com\/css2?family=Sevillana&amp;display=swap<\/strong><\/code><\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;Copy this link, as you will need it in the next steps.<\/p>\n\n\n\n<p><strong>Step 2: Connect to Your Website Using FTP<\/strong><\/p>\n\n\n\n<p>1. Open your computer&#8217;s FileZilla program (an FTP client).<\/p>\n\n\n\n<p>2. Use FileZilla to connect to your website. You will need your FTP login details (host, username, password).<\/p>\n\n\n\n<p>3. Once connected, navigate to the folder:&nbsp;&nbsp;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;<strong>`\/public_html\/wp-content\/themes\/yourthemechild\/`&nbsp;&nbsp;<\/strong><\/p>\n\n\n\n<p>&nbsp;&nbsp;Note: Do not forget to Replace `yourthemechild` with the name of your child theme.<\/p>\n\n\n\n<p><strong>Step 3: Edit the `functions.php` File<\/strong><\/p>\n\n\n\n<p>1. Find the `functions.php` file in your child theme\u2019s folder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-103.png\" alt=\"Accessing Functions.php File\" class=\"wp-image-28064\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-103.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-103-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-103-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Accessing Functions.php File<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>2. Right-click on the `functions.php` file and select &#8220;View\/Edit&#8221; to open it in your code editor.<\/p>\n\n\n\n<p>3. At the bottom of the file, add the following code:&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"round has-background\" style=\"background-color:#f0f0f0\"><code><strong>php<br>function add_my_font(){<br>wp_enqueue_style( 'add_my_font', 'https:\/\/fonts.googleapis.com\/css2?family=Sevillana&amp;display=swap', false );<br>}<br>add_action( 'wp_enqueue_scripts', 'add_my_font' );<\/strong><\/code><\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;This code tells WordPress to load the Sevillana font from Google.<\/p>\n\n\n\n<p><strong>Step 4: Tell WordPress Where to Use the Font<\/strong><\/p>\n\n\n\n<p>1. Go back to your child theme\u2019s folder and find the `style.css` file (this file controls the styling of your site).<\/p>\n\n\n\n<p>2. Open `style.css` in your code editor.<\/p>\n\n\n\n<p>3. Add the following code to the file:&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<p class=\"round has-background\" style=\"background-color:#f0f0f0\"><code><strong>.body, .h1, .h2, .h3, .h4, .h5, .h6 {<br>font-family: 'Sevillana', sans-serif;&nbsp;<br>}<\/strong><\/code><\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;This CSS code sets the Sevillana font for all the body text and headings (H1 to H6) on your site.<\/p>\n\n\n\n<p><strong>Step 5: Save Your Changes<\/strong><\/p>\n\n\n\n<p class=\"justify\">1. Save the changes you made in both the `functions.php` and `style.css` files.<\/p>\n\n\n\n<p class=\"justify\">2. Refresh your website to see the changes. The Sevillana font should now be applied to your text and headings.<\/p>\n\n\n\n<p><strong>Additional Tips:<\/strong><\/p>\n\n\n\n<p class=\"justify\"> If the font doesn&#8217;t appear correctly, double-check that you\u2019ve entered the code correctly.<\/p>\n\n\n\n<p class=\"justify\"> Every WordPress theme may use different CSS rules, so if this method doesn&#8217;t work, you may need to find the specific CSS selectors for your theme. You can use your browser&#8217;s inspection tool to help with this or contact your theme&#8217;s developer for guidance.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<p class=\"has-text-align-left round has-background\" style=\"background-color:#daf2ff\"><strong>Read:<\/strong>   \ud83d\udea9 <a href=\"https:\/\/www.wpoven.com\/blog\/wordpress-icon\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/www.wpoven.com\/blog\/wordpress-icon\/\" rel=\"noreferrer noopener\">How do you embed WordPress icon fonts on your website?<\/a><\/p>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"Adding-custom-fonts-in-WordPress-Full-Site-Editing-Theme\">6. Adding custom fonts in WordPress Full Site Editing Theme<\/h3>\n\n\n\n<p class=\"justify\">In the latest WordPress themes, called <strong>Full Site Editing (FSE) themes<\/strong>, you don&#8217;t need to use the old method of adding custom fonts with CSS code (@font-face).&nbsp;<\/p>\n\n\n\n<p class=\"justify\">Instead, you add the font files directly to a specific folder and then set them up in a file named theme.json.<\/p>\n\n\n\n<p class=\"justify\">To demonstrate this, we are taking the Sevillana font family from Google Fonts and using the <strong>Twenty Twenty-Two theme<\/strong> as an example.<\/p>\n\n\n\n<p><strong>Step 1<\/strong>: <strong>Download the Font from Google Fonts<\/strong><\/p>\n\n\n\n<p class=\"justify\">&#8211; Go to the Google fonts library, and look for the font you want to use &gt; Click on it.<\/p>\n\n\n\n<p class=\"justify\">&#8211; Now, click on the &#8220;<strong>Download all<\/strong>&#8221; button at the top right corner. This will download a ZIP file containing the font files to your computer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-98.png\" alt=\"Downloading Custom Fonts\" class=\"wp-image-28058\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-98.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-98-300x150.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-98-768x384.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Downloading Custom Fonts<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 2: Access Your WordPress Theme Files<\/strong><\/p>\n\n\n\n<p>&#8211; Now, open the WordPress theme files on your computer. You can do this either:<\/p>\n\n\n\n<p>&nbsp;&nbsp;&#8211; Locally (if you have <a href=\"https:\/\/www.wpoven.com\/blog\/how-to-install-wordpress-manually\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress installed<\/a> on your computer), or<\/p>\n\n\n\n<p>&nbsp;&nbsp;&#8211; Via FTP (if you are working on a <a href=\"https:\/\/www.wpoven.com\/blog\/how-to-make-wordpress-website-live\/\" target=\"_blank\" rel=\"noreferrer noopener\">live website<\/a>).<\/p>\n\n\n\n<p><strong><em>For this guide, we&#8217;ll assume you are working on a local installation.<\/em><\/strong><\/p>\n\n\n\n<p class=\"justify\">Make sure you know where these files are located, as you&#8217;ll need them for the next steps.<\/p>\n\n\n\n<p><strong>Step 3: Locate the Font Folder in Your Theme<\/strong><\/p>\n\n\n\n<p>&#8211; Find your theme folder by navigating to:&nbsp;&nbsp;<\/p>\n\n\n\n<p>&nbsp;&nbsp;`wp-content\/themes\/twentytwentytwo\/`<\/p>\n\n\n\n<p>&#8211; Inside the theme folder, go to the `assets` folder, then open the `fonts` folder:&nbsp;&nbsp;<\/p>\n\n\n\n<p>&nbsp;&nbsp;`wp-content\/themes\/twentytwentytwo\/assets\/fonts\/`<\/p>\n\n\n\n<p><strong>Step 4: Add the Downloaded Font Files to Your Theme<\/strong><\/p>\n\n\n\n<p>&#8211; Extract the downloaded ZIP file to find the font files (such as `.woff2` or `.woff` formats).<\/p>\n\n\n\n<p>&#8211; Drag and drop the extracted font folder into the `fonts` folder in your theme&#8217;s directory:&nbsp;&nbsp;<\/p>\n\n\n\n<p>&nbsp;&nbsp;`wp-content\/themes\/twentytwentytwo\/assets\/fonts\/`<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"968\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-107.png\" alt=\"Drag and drop the extracted font folder into the `fonts` folder in your theme&#039;s directory\" class=\"wp-image-28070\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-107.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-107-300x284.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-107-768x726.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Drag and drop the extracted font folder into the `fonts` folder in your theme&#8217;s directory<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Step 5: Open the theme.json File<\/strong><\/p>\n\n\n\n<p>&#8211; Now, find the `theme.json` file, which is in the main theme folder:&nbsp;&nbsp;<\/p>\n\n\n\n<p>&nbsp;&nbsp;`wp-content\/themes\/twentytwentytwo\/theme.json`<\/p>\n\n\n\n<figure class=\"wp-block-image size-full imgsha round\"><img decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-106.png\" alt=\"Now, find the `theme.json` file, which is in the main theme folder\" class=\"wp-image-28069\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-106.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-106-300x151.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/image-106-768x387.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><figcaption class=\"wp-element-caption\"><em><sup>Now, find the `theme.json` file, which is in the main theme folder<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"justify\">&#8211; Right-click on `theme.json` and choose to open it with your favorite code editor (like Notepad, Visual Studio Code, etc.).<\/p>\n\n\n\n<p><strong>Step 6: Add Font Details to the theme.json File<\/strong><\/p>\n\n\n\n<p>&#8211; In the `theme.json` file, look for the &#8220;<strong>settings<\/strong>&#8221; section.<\/p>\n\n\n\n<p class=\"justify\">&#8211; Scroll down to the &#8220;<strong>typography<\/strong>&#8221; settings. You will see some code that defines existing fonts, like &#8220;Source Sans Pro.&#8221;<\/p>\n\n\n\n<p class=\"justify\">Now, add your custom font by inserting this code after the existing font settings:<\/p>\n\n\n\n<p class=\"round has-background\" style=\"background-color:#f0f0f0\"><code><strong>json<br>{<br>&nbsp;&nbsp;\"fontFamily\": \"Custom Font Name\",<br>&nbsp;&nbsp;\"fontFace\": [<br>{<br>&nbsp;&nbsp;&nbsp;\"fontFamily\": \"Custom Font Name\",<br>&nbsp;&nbsp;&nbsp;\"fontStyle\": \"normal\",<br>&nbsp;&nbsp;&nbsp;\"fontWeight\": \"400\",<br>&nbsp;&nbsp;&nbsp;\"src\": [ \"file:.\/assets\/fonts\/CustomFontName.woff2\" ]<br>}<br>&nbsp;&nbsp;]<br>}<\/strong><\/code><\/p>\n\n\n\n<p class=\"justify\">Replace `&#8221;Custom Font Name&#8221;` with the actual name of your font, and `&#8221;CustomFontName.woff2&#8243;` with the exact file name. In this case, we use <strong>Sevillana<\/strong><\/p>\n\n\n\n<p><strong>Step 7: Save and Check Your Changes<\/strong><\/p>\n\n\n\n<ul class=\"justify\">\n<li>Save the `theme.json` file after adding the new font details.<\/li>\n\n\n\n<li>If you&#8217;re working locally, copy the updated file back to the fonts folder of your theme directory to overwrite the existing file.<\/li>\n\n\n\n<li>If you&#8217;re working via FTP, upload the updated theme.json file to your server and overwrite the old file.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 8: View the Font in the Twenty Twenty-Two Theme<\/strong><\/h4>\n\n\n\n<ul class=\"justify\">\n<li>Go to your WordPress dashboard and Navigate to <strong>Appearance &gt; Editor<\/strong> to access the Full Site Editing mode in the Twenty Twenty-Two theme.<\/li>\n\n\n\n<li>When the screen refreshes, click on the <strong>Styles<\/strong> button. You should see your new font listed and ready to use.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.wpoven.com\/dedicated-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"137\" src=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/03\/wpoven-dedicated-hosting-1024x137.png\" alt=\"WPOven Dedicated Hosting\" class=\"wp-image-25538\" srcset=\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/03\/wpoven-dedicated-hosting-1024x137.png 1024w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/03\/wpoven-dedicated-hosting-300x40.png 300w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/03\/wpoven-dedicated-hosting-768x102.png 768w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/03\/wpoven-dedicated-hosting-1536x205.png 1536w, https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/03\/wpoven-dedicated-hosting.png 1919w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" title=\"\"><\/a><\/figure>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p class=\"justify\">As you can see, there are multiple ways to change fonts in WordPress. If you are using a generic theme, the easiest and most straightforward method is to use a WordPress plugin.<\/p>\n\n\n\n<p class=\"justify\">However, if you have a Full Site Editing (FSE) theme, it may provide only two or three font options by default. You can add more fonts manually, but this method is more complex and requires some coding knowledge.<\/p>\n\n\n\n<p class=\"justify\">If you don&#8217;t want to use the manual method or install additional plugins (as adding plugins can affect website performance), it might be better to choose a theme that offers multiple font options built-in.<\/p>\n\n\n\n<p class=\"justify\">But if you are a developer and enjoy working with code, manually adding fonts can be a simple task.<\/p>\n\n\n\n<p class=\"justify\">If you have any questions or concerns regarding this article, please let us know in the comments section below.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub-divider-orientation-horizontal\" id=\"ub_divider_13ee018b-8004-4a6d-935b-2ae8e0654de8\"><hr class=\"ub_divider\" ><\/hr><\/div>","protected":false},"excerpt":{"rendered":"<p>It might seem like a small detail, but WordPress fonts can significantly impact the user experience.<\/p>\n<p>Fonts are so powerful that choosing the right one can enhance the look and feel of your website, while a poor choice can detract from it. That&#8217;s how important they are in your website design and brand identity.<\/p>\n<p>So, when you&#8217;ve selected a particular font, you also need to know how to change fonts in WordPress.<\/p>\n<p>There are multiple ways to change fonts in WordPress, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.wpoven.com\/blog\/how-to-change-fonts-in-wordpress\/\" class=\"more-link\">Read More <i class=\"fa fa-angle-double-right\" aria-hidden=\"true\"><\/i><span class=\"screen-reader-text\"> &#8220;How To Change Fonts In WordPress 2024 (FAST &#038; Easy!)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":28,"featured_media":28068,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ub_ctt_via":"","footnotes":""},"categories":[6],"acf":[],"featured_image_src":"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2024\/08\/Change_Fonts_in_WordPress.png","author_info":{"display_name":"Rahul","author_link":"https:\/\/www.wpoven.com\/blog\/author\/rahul\/"},"_links":{"self":[{"href":"https:\/\/www.wpoven.com\/blog\/wp-json\/wp\/v2\/posts\/28035"}],"collection":[{"href":"https:\/\/www.wpoven.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wpoven.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wpoven.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wpoven.com\/blog\/wp-json\/wp\/v2\/comments?post=28035"}],"version-history":[{"count":2,"href":"https:\/\/www.wpoven.com\/blog\/wp-json\/wp\/v2\/posts\/28035\/revisions"}],"predecessor-version":[{"id":28161,"href":"https:\/\/www.wpoven.com\/blog\/wp-json\/wp\/v2\/posts\/28035\/revisions\/28161"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wpoven.com\/blog\/wp-json\/wp\/v2\/media\/28068"}],"wp:attachment":[{"href":"https:\/\/www.wpoven.com\/blog\/wp-json\/wp\/v2\/media?parent=28035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wpoven.com\/blog\/wp-json\/wp\/v2\/categories?post=28035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}