{"id":51499,"date":"2015-08-10T01:30:10","date_gmt":"2015-08-10T05:30:10","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=51499"},"modified":"2017-07-25T11:01:42","modified_gmt":"2017-07-25T15:01:42","slug":"joomla-3-x-how-to-add-and-use-custom-fonts","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-3-x-how-to-add-and-use-custom-fonts.html","title":{"rendered":"Joomla 3.x. How to add and use custom fonts"},"content":{"rendered":"

\r\n

This tutorial shows how to add any custom font to your Joomla site and apply it to text.<\/p>\r\n

Joomla 3.x. How to add and use custom fonts<\/a><\/p>\r\n

In order to apply a custom font to your site’s text, you should perform the following:<\/p>\r\n

    \r\n
  1. \r\n

    Download a font from the Internet or just copy it from your system folder. For example, Windows stores its fonts in the C:\\Windows\\Fonts<\/strong> directory. Make sure the font format is either TTF<\/strong> (TrueType Font) or OTF<\/strong> (OpenType Font).<\/p>\r\n<\/li>\r\n

  2. \r\n

    Go to Font 2 Web<\/a> website, choose the font file from your local system and hit the CONVERT&DOWNLOAD<\/strong> button:<\/p>\r\n

    \"Joomla_3.x._How_to_add_and_use_a_custom_font-1.jpg\"<\/a>\r\n\t<\/li>\r\n

  3. \r\n

    You’ll get a zip archive. We need the fonts<\/strong> folder and fonts.css<\/strong> file that are inside the archive:<\/p>\r\n

    \"Joomla_3.x._How_to_add_and_use_a_custom_font-2.jpg\"<\/a>\r\n\t<\/li>\r\n

  4. \r\n

    Upload the contents of the fonts<\/strong> folder to the templates\/themeXXXX\/fonts\/<\/strong> directory on your server. Make sure the files have the permissions set to 644<\/strong>:<\/p>\r\n

    \"Joomla_3.x._How_to_add_and_use_a_custom_font-3.jpg\"<\/a>\r\n\t<\/li>\r\n

  5. \r\n

    Open up the fonts.css<\/strong> file, locate url()<\/strong> attributes and correct their URLs from fonts\/XXX.xxx<\/strong> to ..\/fonts\/XXX.xxx<\/strong> (add two periods and a forward slash at the beginning). You also should change the font-family<\/strong> attribute to coincide with the names of files:<\/p>\r\n

    \"Joomla_3.x._How_to_add_and_use_a_custom_font-4.jpg\"<\/a>\r\n\t<\/li>\r\n

  6. \r\n

    Open up the templates\/themeXXXX\/css\/template.css<\/strong> file and scroll down to the very bottom. There you need to paste the code copied from the fonts.css<\/strong> file.<\/p>\r\n<\/li>\r\n

  7. \r\n

    Now you can apply the new font to any element by specifying the font-family<\/strong> attribute. You should add the following code to the very bottom of the file templates\/themeXXXX\/css\/template.css<\/strong><\/p>\r\n

    \r\n\t\t\t.icemegamenu > ul > li > a.iceMenuTitle {\r\n\t\t\tfont-family: newfont;\r\n\t\t\t}\r\n\t\t<\/pre>\r\n
    .icemegamenu > ul > li > a.iceMenuTitle<\/strong> is the element specific selector. Sometimes the font-family<\/strong> attribute may already be declared in another file, and to overwrite it, you need to either find that place in code and put your font name instead or add the important<\/strong> specifier:<\/p>\r\n
    \r\n\t\t\t.icemegamenu > ul > li > a.iceMenuTitle {\r\n\t\t\tfont-family: newfont !important;\r\n\t\t\t}\r\n\t\t<\/pre>\r\n
    The resulting code should look like this:<\/p>\r\n
    \"Joomla_3.x._How_to_add_and_use_a_custom_font-5.jpg\"<\/a>\r\n\t<\/li>\r\n
  8. \r\n
    Save the changes in the templates\/themeXXXX\/css\/template.css<\/strong> file and upload it to the server.<\/p>\r\n<\/li>\r\n<\/ol>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n
    Joomla 3.x. How to add and use custom fonts<\/a><\/p>\r\n
    \r\n\r\n\r\n<\/a>","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to add any operating system font to your Joomla site and apply it to text.<\/p>\n","protected":false},"author":85,"featured_media":51793,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[789,688,483],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51499"}],"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\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=51499"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51499\/revisions"}],"predecessor-version":[{"id":82249,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51499\/revisions\/82249"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/51793"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=51499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=51499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=51499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}