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"
- Source - choose Any external fonts (e.g. Typekit).
- Font Family - enter the FontName that you add in the preceding code
font-family: "FontName";