If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

WordPress. How to add a custom font

This tutorial shows how to add a custom font in WordPress.

WordPress. How to add a custom font

In case you need to add a custom font to your WordPress website, you can search for the website to download the font you need. For example, this website: http://www.fontsquirrel.com.

  1. Visit http://www.fontsquirrel.com. site, there is a ‘Font Filter‘, choose ‘Webfont‘ there:

    Wordpress_How_to__add_a_custom_font-1

  2. Choose the font you want to add, and download it:

    Wordpress_How_to__add_a_custom_font-2

  3. Log into your server through FTP or File manager, follow this path ‘wp-content/themes/themeXXXX‘ and create a new folder ‘fonts’. Upload the font you have downloaded to this folder, then extract this file(s). You can remove the original .zip file:

    Wordpress_How_to__add_a_custom_font-3

  4. Log into WordPress Admin Panel. Go to Appearance -> Editor, open ‘style.css‘ file under themeXXXX theme:

    Wordpress_How_to__add_a_custom_font-4

  5. Add the below codes to this ‘style.css‘ file:

      @font-face { 
      font-family: fontname; 
      src: url('link'); 
    }

    *with: fontname = the name you will create for the new custom font (any name).

    link = the direct link of this font file that you uploaded to the server. (site url + folder path + font file name):

    Wordpress_How_to__add_a_custom_font-5

  6. Copy the above code to the next line of ‘style.css‘ file and remove the second line with ‘src‘ from the code, then add !important tag after the font name:

    Wordpress_How_to__add_a_custom_font-6

  7. You can find the CSS class for the specific text by using the developer tool:

    Wordpress_How_to__add_a_custom_font-7

  8. Replace @font-face with the CSS class (CSS selector) that you have found with developer tool. Then click ‘Upload File‘:

    Wordpress_How_to__add_a_custom_font-8

  9. Refresh your site to see the new custom font showing up.

Feel free to check the detailed video tutorial below:

WordPress. How to add a custom font