{"id":12068,"date":"2024-02-15T10:24:00","date_gmt":"2024-02-15T10:24:00","guid":{"rendered":"https:\/\/www.20i.com\/blog\/?p=12068"},"modified":"2026-01-08T12:55:52","modified_gmt":"2026-01-08T12:55:52","slug":"how-to-use-custom-fonts-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.20i.com\/blog\/how-to-use-custom-fonts-in-wordpress\/","title":{"rendered":"How to use Custom Fonts in WordPress"},"content":{"rendered":"\n

WordPress comes with a range of fonts that are ready for web designers to use. With an estimated 43% of all websites (around 810 million at the time of writing) built on the platform, using different fonts can help your website to stand out.\u00a0<\/p>\n\n\n\n

Custom fonts enable you to better establish the identity of your brand, increase readability and make for an overall better and more unique experience for your visitors. <\/p>\n\n\n\n

In this guide, we will be taking a look at several ways of installing custom fonts onto your website so that you can choose what method works best for you. <\/p>\n\n\n\n

Find custom fonts to use in WordPress<\/strong><\/h3>\n\n\n\n

WordPress themes do not contain all fonts in existence. There are, however, various free and paid sources you can use to get the fonts that you need into WordPress, the main two being Google<\/a> and Adobe<\/a>.<\/p>\n\n\n\n

Google Fonts<\/strong><\/h3>\n\n\n\n

Beginners and experienced users alike utilise Google Fonts as they are quick and easy to get up and running.<\/p>\n\n\n\n

Other benefits include the wide variety of fonts, performance (fonts are served from Google’s servers and fast content delivery helps SEO), they are updated regularly and, perhaps most attractively of all, they are open source and free to use!<\/p>\n\n\n\n

Adding Google Fonts To WordPress Using a Plugin<\/strong><\/h3>\n\n\n\n

As with most things WordPress related – there is a plugin for that. In this case, it called Google Fonts Typography<\/a> by Fonts Plugin.<\/p>\n\n\n\n

To install the plugin, log into your WordPress website via wp-admin. After you are signed in an at the main WordPress menu you\u2019ll need to hover your mouse cursor above where it says \u201cPlugins\u201d in the menu on the left, and click on \u201cAdd New Plugin\u201d.<\/p>\n\n\n\n

The Add New Plugin screen should load after a few seconds. Type \u201cGoogle Fonts Typography\u201d into the search bar in the top right and you should see the plugin appear as the first result.<\/p>\n\n\n\n

Click \u201cInstall Now\u201d then press the  \u201cActivate\u201d button. Once the plugin is activated a \u201cFonts Plugin\u201d item will appear in the menu on the left. Click \u201cCustomize Fonts\u201d in the admin side bar.<\/p>\n\n\n\n

\"wordpress<\/figure>\n\n\n\n

This will take you to the theme customiser in WordPress, and should open the Fonts Plugin section.<\/p>\n\n\n\n

\"wordpress<\/figure>\n\n\n\n

Clicking \u201cBasic Settings\u201d will allow you to change the default fonts for your website. \u201cAdvanced Settings\u201d lets you change fonts for specific areas. <\/p>\n\n\n\n

Basic Settings<\/strong> 
Basic settings let you change the font for your Headings, Buttons and written content.<\/p>\n\n\n\n

The drop-down menus under \u201cFont Family\u201d gives you a list of fonts to choose, with your current default font at the top of the list.  After choosing a font, you will see a preview.<\/p>\n\n\n\n

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

Advanced Settings<\/strong>
Advanced Settings presents the same options as Basic Settings but broken down into more granular options, so you can fine tune your selections.<\/p>\n\n\n\n

\"wordpress<\/figure>\n\n\n\n

Here is a brief description for each option: <\/p>\n\n\n\n

Branding <\/strong>\u2014 Change the font of your site title and description. 
Navigation <\/strong>\u2014 Configure the typography of navigation menus. 
Content <\/strong>\u2014 Make changes to your content typography as well as each of the heading tags
Sidebar <\/strong>\u2014 Font controls for sidebar headings and content. 
Footer <\/strong>\u2014 Font control for sidebar headings and content the site footer. <\/p>\n\n\n\n

You can choose which font you\u2019d like to use by selecting the font from the drop-down menu. When you\u2019re happy with your choices, you can then click \u201cPublish\u201d for your changes to go live.<\/p>\n\n\n\n

Adding Google Fonts manually<\/strong><\/h3>\n\n\n\n

In this example, we will cover downloading a font from Google\u2019s font library, uploading it to your website and modifying your WordPress theme files so that they use the new font.  <\/p>\n\n\n\n

Use this link to go to the Google Fonts<\/a> library. Find and click on the font you want to use. The Type Tester will load. This tool lets you preview and try different weights (thicknesses) within the font family that you chose.<\/p>\n\n\n\n

Some fonts have multiple weights, ranging from Light to Extra Bold. Other fonts have just a single weight. <\/p>\n\n\n\n

When you have decided which weights to download: click the (+) symbol. You can select more than one weight at a time, which is ideal if you would like your website to use Bold, Light and Italic variations of a font.<\/p>\n\n\n\n

\"wordpress<\/figure>\n\n\n\n

With the font(s) selected, the website will generate the code that you will need to use in the WordPress CSS file.<\/p>\n\n\n\n

\"wordpress<\/figure>\n\n\n\n

Click the blue “Download all” button in the bottom right to download a zip file contains your font(s). Unzip the files and upload them to your theme directory using the File Manager in My20i or by FTP. If you do not already have a font directory, you can create this manually.<\/p>\n\n\n\n

\"my20i<\/figure>\n\n\n\n

With the font uploaded it is now time to modify your CSS and function.php files.  <\/p>\n\n\n\n

    \n
  1. You can either modify the files via the file manager or via wp-admin > Tools > Theme File Editor.<\/li>\n<\/ol>\n\n\n\n
    \"wordpress<\/figure>\n\n\n\n
      \n
    1. Add this to code to the top or bottom of your CSS file: 
       
      @font-face {font-family: your-font<\/strong>; src: url(https:\/\/domain.com\/path\/to\/your\/font\/file<\/strong>); font-weight: normal;} <\/code><\/li>\n<\/ol>\n\n\n\n

      Replace the bits in bold with the name of the font you want to use and the URL path with where you stored the font on your website. You can get the font family information from where you downloaded the font file.<\/p>\n\n\n\n

      \"wordpress<\/figure>\n\n\n\n

      You can specify where you would like your font to take effect. In my example, I\u2019ve specified the \u2018h1\u2019 tag <\/p>\n\n\n\n

      h1 {font-family: 'Playfair Display', serif;} <\/code><\/p>\n\n\n\n

        \n
      1. Modify the themes functions.php file by adding this code:

        function enqueue_custom_styles()
        { wp_enqueue_style('custom-fonts', get_stylesheet_uri() ); } 
        add_action('wp_enqueue_scripts', 'enqueue_custom_styles'); <\/code><\/li>\n<\/ol>\n\n\n\n

        Adding this code will include the “style.css” file (which includes the styling rules for the font we want to use) when a user visits the front end of the WordPress site.<\/p>\n\n\n\n

        wp_enqueue_style<\/code> is a WordPress function used to enqueue stylesheets. In this case, it’s being used to enqueue a stylesheet named “custom-fonts”. The get_stylesheet_uri()<\/code> function handles the URL of the main theme\u2019s style.css file. <\/p>\n\n\n\n

        Save the changes and check your website. Be sure to clear your browsers cookies and cache. You should see your new font take effect on the website. <\/p>\n\n\n\n

        \"sample<\/figure>\n\n\n\n

        Use Google Font API<\/strong><\/h3>\n\n\n\n

        Using Google Font API externally is another quick and easy way of getting custom fonts on your website. The benefits of this method are that you don\u2019t need to download and then upload font files to your website.<\/p>\n\n\n\n

        Calling directly to Google\u2019s API will give you the most up to date style sheets and Google\u2019s servers are fast, so page content will be delivered very quickly. <\/p>\n\n\n\n

        Here are a few ways you do can do this: <\/p>\n\n\n\n

        Using wp_enqueue _style (recommended)<\/strong> 
        The WordPress function wp_enqueue _style<\/code> is performant, allows for asynchronous loading and aligns with WordPress\u2019s architecture.<\/p>\n\n\n\n

        Below you will see how we have enqueued the stylesheet for the Google Fonts API. It uses the handle ‘fonts’, and the second parameter is the URL of the Google Fonts stylesheet.<\/p>\n\n\n\n

        function my_theme_enqueue_styles() { 
        wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() ); 
        wp_enqueue_style('fonts', 'https:\/\/fonts.googleapis.com\/css2?family=Roboto:ital,wght@1,100;1,400&display=swap'); }
        add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); <\/code><\/p>\n\n\n\n

        Use \u2018@import url\u2019 via your websites CSS file<\/strong> 
        Outside of using a plugin; this is the easiest method as you can add it directly to your CSS file and there is no need to understand WordPress functions or modify PHP file.<\/p>\n\n\n\n

        The drawback is that it is the least performant. This is because the browser fetches the imported stylesheets sequentially – every imported stylesheet must be loaded and processed before the browser moves onto the next, which results in slower page speed load times. 
         
        To use this method; add this line of code (replacing the URL with your desired font\u2019s URL) to your themes CSS file.<\/p>\n\n\n\n

        @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital@1&display=swap'); <\/code><\/p>\n\n\n\n

        You can find the @import<\/code> code from the Google Fonts library, where you selected the Font style. <\/p>\n\n\n\n

        \"import<\/figure>\n\n\n\n

        Remember <\/strong>update your themes CSS file to specify the font that you would like to use i.e <\/p>\n\n\n\n

        h1 {font-family: 'Roboto', serif;} <\/code><\/p>\n\n\n\n

        For optimal performance and flexibility, it’s recommended to use wp_enqueue_style<\/code> to include external stylesheets in WordPress themes. While @import<\/code> is simpler, it may not offer the same level of performance optimisations. <\/p>\n\n\n\n

        Adobe Fonts<\/strong><\/h3>\n\n\n\n

        Adding Adobe fonts into WordPress is similar to adding Google fonts using the methods above. The main difference is that you need to sign up to Adobe Fonts<\/a> before you can select a font from the library.<\/p>\n\n\n\n

        Another significant difference is that not all fonts that you will see on Adobe Fonts are free and open source. <\/p>\n\n\n\n

        To manually embed the font into your website, select the option \u201cAdd to Web project\u201d<\/p>\n\n\n\n

        \"noto<\/figure>\n\n\n\n

        If you do not already have a project, you can create a new one:<\/p>\n\n\n\n

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

        After clicking \u201cCreate\u201d you will be given the code to copy into your website.<\/p>\n\n\n\n

        \"add<\/figure>\n\n\n\n

        You then have the option to use <link rel= href \"https:\/\/use.typkit.net\/fontid.css\"<\/code> or import @url<\/code>. <\/p>\n\n\n\n

        As with Google fonts, you can use the Adobe Font API URL in your wp_enqueue_style<\/code> code and add the font family into your CSS file. Alternatively, you can add the \u201cimport URL<\/code>\u201d code to your CSS file.<\/p>\n\n\n\n

        Final thoughts<\/h3>\n\n\n\n

        In this article, we explored several different ways of adding custom fonts into WordPress, staring with using a simple plugin and moving onto adding them manually and using APIs. <\/p>\n\n\n\n

        The easiest method is to use a plugin. Better performance and flexibility can be achieved using the advanced method and modifying your functions.php file using wp_enqueue_style<\/code> function. <\/p>\n\n\n\n

        If you\u2019re not comfortable modifying your websites PHP code, you can experiment on a fresh WordPress install.<\/p>\n\n\n\n

        I hope that you found this guide to be useful. Please feel free to share it with anyone you know that needs it and, if you know of any other methods of getting custom fonts onto your WordPress website \u2013 please let us know in the comments section! <\/p>\n\n\n

        \n
        \n
        \"Managed<\/a><\/div>\n\n","protected":false},"excerpt":{"rendered":"WordPress comes with a range of fonts that are ready for web designers to use. With an estimated…","protected":false},"author":25,"featured_media":12104,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"ub_ctt_via":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[60,293],"tags":[57,76],"class_list":["post-12068","post","type-post","status-publish","format-standard","has-post-thumbnail","category-web-design-dev","category-wordpress","tag-web-design","tag-wordpress","cs-entry"],"featured_image_src":"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2024\/02\/How-to-use-custom-fonts-in-wordpress.png","author_info":{"display_name":"Ben Perry","author_link":"https:\/\/www.20i.com\/blog\/author\/benperry92\/"},"_links":{"self":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/12068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/comments?post=12068"}],"version-history":[{"count":14,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/12068\/revisions"}],"predecessor-version":[{"id":18178,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/12068\/revisions\/18178"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media\/12104"}],"wp:attachment":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media?parent=12068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/categories?post=12068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/tags?post=12068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}