{"id":39946,"date":"2014-12-15T07:46:48","date_gmt":"2014-12-15T12:46:48","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=39946"},"modified":"2017-08-17T06:08:31","modified_gmt":"2017-08-17T10:08:31","slug":"wordpress-how-to-add-a-custom-font","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-add-a-custom-font.html","title":{"rendered":"WordPress. How to add a custom font"},"content":{"rendered":"

\r\n<\/p>\r\n

This tutorial shows how to add a custom font in WordPress.<\/p>\r\n

WordPress. How to add a custom font<\/a><\/p>\r\n

\r\n\r\n\r\n<\/a>\r\n<\/div>\r\n

In case you need to add a custom font<\/em> to your WordPress<\/strong> website, you can search for the website to download the font you need. For example, this website: http:\/\/www.fontsquirrel.com.<\/a><\/p>\r\n

    \r\n
  1. \r\n

    Visit http:\/\/www.fontsquirrel.com.<\/a> site, there is a ‘Font Filter<\/strong>‘, choose ‘Webfont<\/strong>‘ there:<\/p>\r\n

    \"Wordpress_How_to__add_a_custom_font-1\"<\/a><\/p>\r\n<\/li>\r\n

  2. \r\n

    Choose the font you want to add, and download it:<\/p>\r\n

    \"Wordpress_How_to__add_a_custom_font-2\"<\/a><\/p>\r\n<\/li>\r\n

  3. \r\n

    Log into your server through FTP<\/strong> or File manager<\/strong>, follow this path ‘wp-content\/themes\/themeXXXX<\/em>‘ 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:<\/p>\r\n

    \"Wordpress_How_to__add_a_custom_font-3\"<\/a>\r\n <\/li>\r\n

  4. \r\n

    Log into WordPress Admin Panel<\/strong>. Go to Appearance -> Editor<\/strong>, open ‘style.css<\/strong>‘ file under themeXXXX theme:<\/p>\r\n

    \"Wordpress_How_to__add_a_custom_font-4\"<\/a>\r\n<\/li>\r\n

  5. \r\n

    Add the below codes to this ‘style.css<\/strong>‘ file:<\/p>\r\n

      @font-face { \r\n  font-family: fontname; \r\n  src: url('link'); \r\n}<\/pre>\r\n
    *with:  fontname<\/em> = the name you will create for the new custom font (any name).<\/p>\r\n
     link<\/em> = the direct link of this font file that you uploaded to the server. (site url + folder path + font file name<\/em>):<\/p>\r\n
    \"Wordpress_How_to__add_a_custom_font-5\"<\/a>\r\n <\/li>\r\n
  6. \r\n
    Copy the above code to the next line of ‘style.css<\/strong>‘ file and remove the second line with ‘src<\/strong>‘ from the code, then add !important<\/strong> tag after the font name: <\/p>\r\n
    \"Wordpress_How_to__add_a_custom_font-6\"<\/a><\/p>\r\n
  7. \r\n
    You can find the CSS class for the specific text by using the developer tool<\/a>:<\/p>\r\n
    \"Wordpress_How_to__add_a_custom_font-7\"<\/a>\r\n<\/li>\r\n
  8. \r\n
    Replace  @font-face <\/strong> with the CSS class (CSS selector) that you have found with developer tool. Then click ‘Upload File<\/strong>‘:<\/p>\r\n
    \"Wordpress_How_to__add_a_custom_font-8\"<\/a>\r\n<\/li>\r\n
  9. \r\n
    Refresh your site to see the new custom font showing up.<\/p>\r\n<\/li>\r\n<\/ol>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n
    WordPress. How to add a custom font<\/a><\/p>\r\n<\/p>\r\n
    <\/p>","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to add a custom font in WordPress.<\/p>\n","protected":false},"author":69,"featured_media":41349,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[789,688,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/39946"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=39946"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/39946\/revisions"}],"predecessor-version":[{"id":82831,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/39946\/revisions\/82831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/41349"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=39946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=39946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=39946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}