{"id":53785,"date":"2015-09-09T04:35:11","date_gmt":"2015-09-09T08:35:11","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=53785"},"modified":"2017-08-17T06:05:21","modified_gmt":"2017-08-17T10:05:21","slug":"cherryframework-4-how-to-add-a-custom-font","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-4-how-to-add-a-custom-font.html","title":{"rendered":"CherryFramework 4. How to add a custom font"},"content":{"rendered":"

\r\n

Hello! This video tutorial shows how to add custom font<\/strong> in CherryFramework 4 templates.<\/p>\r\n

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

You may want to add an additional font which is not included in the framework of your site.<\/p>\r\n

Let’s learn how to do this.<\/p>\r\n

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

    Use your favorite search engine to find the site with free webfonts<\/strong>, e.g. http:\/\/www.fontsquirrel.com<\/a> :<\/p>\r\n

    \"cherryframework4_how_to_add_custom_font_1\"<\/a>\r\n<\/li>\r\n

  2. \r\n

    Choose the font that fits your desire and download it to your machine:<\/p>\r\n

    \"cherryframework4_how_to_add_custom_font_2\"<\/a>\r\n<\/li>\r\n

  3. \r\n

    Then, navigate to http:\/\/www.font2web.com\/<\/a> site and click “Browse…”<\/strong> button to choose the downloaded font file. Make sure the font type is either TTF (True Type Font)<\/strong> or OTF (Open Type Font)<\/strong>:<\/p>\r\n

    \"cherryframework4_how_to_add_custom_font_3\"<\/a>\r\n<\/li>\r\n

  4. \r\n

    Once the font file is uploaded, click the “Convert and Download”<\/strong> button to download converted font to your machine:<\/p>\r\n

    \"cherryframework4_how_to_add_custom_font_4\"<\/a>\r\n<\/li>\r\n<\/ol>\r\n

    Unarchive the downloaded file, the converted font package has the following structure:<\/p>\r\n

    \"cherryframework4_how_to_add_custom_font_5\"<\/a><\/p>\r\n

    We will need “fonts”<\/strong> folder and fonts.css<\/strong> file only.<\/p>\r\n

      \r\n
    1. \r\n

      Access your FTP\/hosting control panel File Manager<\/strong> and navigate to \/wp-content\/themes\/themeXXXXX\/assets\/<\/strong> directory, where themeXXXXX<\/strong> is your child theme name.<\/p>\r\n<\/li>\r\n

    2. \r\n

      Upload recently downloaded “fonts”<\/strong> folder to \/assets\/<\/strong> directory.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

      Now that the font is uploaded to your site, you should add a reference to it in your admin panel.<\/p>\r\n

        \r\n
      1. \r\n

        Open the fonts.css<\/strong> file from the converted font package in any text editor, e.g. Notepad++<\/strong>, Sublime Text 2<\/strong>, etc.:<\/p>\r\n

        \"cherryframework4_how_to_add_custom_font_6\"<\/a>\r\n<\/li>\r\n

      2. \r\n

        Change the url() attributes<\/strong> from ‘fonts\/Conv_Allura-Regular.xxx’<\/strong> to ‘assets\/fonts\/Conv_Allura-Regular.xxx’<\/strong> by adding assets\/ at the beginning:<\/p>\r\n

        \"cherryframework4_how_to_add_custom_font_7\"<\/a>\r\n<\/li>\r\n

      3. \r\n

        Then log into your WordPress dashboard<\/strong> and navigate to Appearance ->Editor<\/strong>:<\/p>\r\n

        \"cherryframework4_how_to_add_custom_font_8\"<\/a>\r\n<\/li>\r\n

      4. \r\n

        Copy the reviously altered fonts.css<\/strong> file code and paste it at the very end of the appeared style.css<\/strong> file:<\/p>\r\n<\/li>\r\n<\/ol>\r\n

        \r\n@font-face {\r\n\tfont-family: 'Conv_Allura-Regular';\r\n\tsrc: url('assets\/fonts\/Conv_Allura-Regular.eot');\r\n\tsrc: local('\u263a'), url('assets\/fonts\/Conv_Allura-Regular.woff') format('woff'), url('assets\/fonts\/Conv_Allura-Regular.ttf') format('truetype'), url('assets\/fonts\/Conv_Allura-Regular.svg') format('svg');\r\n\tfont-weight: normal;\r\n\tfont-style: normal;\r\n}\r\n<\/pre>\r\n
        \"cherryframework4_how_to_add_custom_font_9\"<\/a><\/p>\r\n
        You will have your own font name instead of “Conv_Allura-Regular”.<\/p>\r\n
        Now, let’s say, you want to apply newly added font to h5<\/strong> titles on your site.<\/p>\r\n
        In order to do this, add the following code right below the previously added code:<\/p>\r\n
        \r\nh5 { \r\n  font-family: Conv_Allura-Regular !important;  \r\n}\r\n<\/pre>\r\n
        Pay attention to !important<\/strong> declaration which is added to the CSS rule<\/strong> to overwrite already existing font-family property<\/strong> for h5<\/strong> titles:<\/p>\r\n
        \"cherryframework4_how_to_add_custom_font_10\"<\/a><\/p>\r\n
        Click the “Update File”<\/strong> button below to apply the changes.<\/p>\r\n
        Navigate to your site front-end and refresh the page to see the changes.<\/p>\r\n
        You can see the font of h5<\/strong> titles is replaced with your custom font.<\/p>\r\n
        This is the end of the tutorial, you have learnt how to add custom font in your Cherry Framework 4 template.<\/p>\r\n
        Feel free to check the detailed video tutorial below:<\/p>\r\n
        CherryFramework 4. How to add a custom font<\/a><\/p>\r\n<\/p>\r\n
        <\/p>","protected":false},"excerpt":{"rendered":"
        This video tutorial shows how to add custom font<\/strong> in Cherry Framework 4 Wordpress templates.<\/p>\n","protected":false},"author":68,"featured_media":53798,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[2012,789,688],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53785"}],"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\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=53785"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53785\/revisions"}],"predecessor-version":[{"id":82825,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/53785\/revisions\/82825"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/53798"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=53785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=53785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=53785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}