{"id":33854,"date":"2014-05-14T11:10:55","date_gmt":"2014-05-14T15:10:55","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=33854"},"modified":"2017-08-17T06:09:28","modified_gmt":"2017-08-17T10:09:28","slug":"wordpress-how-to-add-google-web-font","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-add-google-web-font.html","title":{"rendered":"WordPress. How to add Google WEB font"},"content":{"rendered":"

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

This tutorial shows how to add a Google WEB font to a WordPress template based on Cherry Framework.<\/p>\r\n

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

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

    In Cherry options, we can see a list of fonts. We are going to add one more font.<\/p>\r\n

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

  2. \r\n

    Go to Appearance -> Editor<\/strong>. Open the options.php<\/strong> file for editing. Search for the following code: <\/p>\r\n

    $typography_mixed_fonts = array_merge( options_typography_get_os_fonts() , options_typography_get_google_fonts() );<\/pre>\r\n
     You can usually find it under the \/\/ Fonts<\/strong> comment.<\/p>\r\n
    \"WordPress_How_to_add_Google_WEB_font-2\"<\/a><\/p>\r\n<\/li>\r\n
  3. \r\n
    Open the Google Web fonts page<\/a>, select the desired font and add it to Collection<\/strong>. Click the Use<\/strong> button.<\/p>\r\n
    \"WordPress_How_to_add_Google_WEB_font-3\"<\/a><\/p>\r\n<\/li>\r\n
  4. \r\n
    Open the @import<\/strong> tab and you will see a CSS font import code. In our case it is Domine, serif is the font family.<\/p>\r\n
    \"WordPress_How_to_add_Google_WEB_font-4\"<\/a><\/p>\r\n<\/li>\r\n
  5. \r\n
    In the options.php<\/strong> file you should add the following code:<\/p>\r\n
    $typography_mixed_fonts["Domine, serif"] = "Domine *"; <\/pre>\r\n
    before:<\/p>\r\n
    asort($typography_mixed_fonts); <\/pre>\r\n<\/li>\r\n
    In this code "Domine, serif"<\/strong> is the font family, "Domine *"<\/strong> is the font name that will appear in Cherry options. The modified file should look like on the screenshot below. Save the changes.<\/p>\r\n
    \"WordPress_How_to_add_Google_WEB_font-5\"<\/a><\/p>\r\n
  6. \r\n
     Open the themeXXXXX\/style.less<\/strong> file with any text\/code editor. Copy the @import code and paste it at the beginning of the style.less file. Save the changes and upload the modified file, replacing the original one.<\/p>\r\n
    \"WordPress_How_to_add_Google_WEB_font-6\"<\/a><\/p>\r\n<\/li>\r\n
  7. \r\n
     Refresh the page. We have added a Google Web font. Now you can see it under Cherry fonts options.<\/p>\r\n
    \"WordPress_How_to_add_Google_WEB_font-7\"<\/a><\/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 Google WEB font<\/a><\/p>\r\n<\/p>\r\n
    <\/p>","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to a add Google WEB font to a WordPress template based on Cherry Framework.<\/p>\n","protected":false},"author":39,"featured_media":33863,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1158,1419,688,1129,929],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/33854"}],"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\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=33854"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/33854\/revisions"}],"predecessor-version":[{"id":82832,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/33854\/revisions\/82832"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/33863"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=33854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=33854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=33854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}