How to add a custom font to the theme ?

Knowledge Base > General > How to add a custom font to the theme ?

in General Tags: add fontfont-facestyletypography

  • First you need to convert the fonts (eg. TTF or OTF format) that you have to use with @font-face CSS property. Use one of the following tools: http://fontface.codeandmore.com orhttp://www.fontsquirrel.com/fontface/generator to generate the fonts.
  • Download the generated zip and you should have the following font formats: .eot, .svg, .ttf and .woff. Upload those font files to your server (ie. create a ‘fonts’ under your root folder or ‘wp-content’ folder).
  • Now you need to specify the font in your CSS. The CSS can be added via TiePanel >> Styling >> Custom CSS >> Global CSS section:
    @font-face {
    font-family: "FontName";
    src: url("http://yoursite.com/fonts/fontname.eot");
    src: url("http://yoursite.com/fonts/fontname.eot?#iefix") format("embedded-opentype"),
    url("http://yoursite.com/fonts/fontname.woff") format("woff"),
    url("http://yoursite.com/fonts/fontname.ttf") format("truetype"),
    url("http://yoursite.com/fonts/fontname.svg#fontname") format("svg");
    }
    
  • Now you may specify which elements to apply the custom font, for example:
    h1, h2, h3, h4, h5, h6, .post-title, .entry {
    			    font-family: "FontName";
    			}

0