How to add a custom font

Jannah comes with a powerful typography options, one of these options is the source of the font that you will use. 

Source options that Jannah support

  • Theme Defaults - with use the default fonts that come with the theme.
  • Standard Fonts - you can choose one of the browser standard fonts,15+ font.
  • Google Fonts - you can choose one from over 800 google fonts.
  • FontFace.me Fonts - choose one from +150 FontFace fonts.
  • Any external fonts (e.g. Typekit) - add your custom font, it's useful if you pay a new font and want to add this font to your site.

How to Add a New Font

Step 1 - Upload the font files to the server.

Step 2 - Navigate to WP admin → Jannah → Theme Options → Styling → Custom CSS and add this code:

@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");
}

Replace the FontName with the font name you will use. Also, replace the paths of the fonts files.

Step 3 - Navigate to  WP admin → Jannah → Theme Options → Typography and go to the element that you will use the font you uploaded before. for example "Body Font Family"

  1. Source - choose Any external fonts (e.g. Typekit).
  2. Font Family - enter the FontName that you add in the preceding code 
    font-family: "FontName";