How to add a custom font to the theme?

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

in Sahifa

  • 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";
			}

1

Account