1. Home
  2. Jupiter Fonts (Typography)

Jupiter Fonts (Typography)

Updated on January 2, 2019

Theme Options is the main section of Jupiter, which you can use to change your global settings for your website. You can access Theme Options from top left side of your dashboard or from left side via Jupiter menu. We are going to describe about Jupiter Fonts options available under Typography section of Theme Options in this article.

It is possible to have 3 Font Types assigned for the whole website in Jupiter, they are Google Fonts, Web Safe fonts and Typekit fonts.

Setting a Font Family

1From WordPress left menu, go to Jupiter > Theme Options > Typography.

typography

2To add a new font family, click on + icon and select a font family. Then save the font clicking on the green icon.

3You can also change this font clicking on the pencil icon to choose another font family.

From the drop-down list select the font type you want to use: Google Fonts, Web Safe fonts or Typekit fonts.

4Select Google Font Character Set.

You can choose from these sets:

  • latin
  • latin-ext
  • cyrillic-ext
  • greek-ext
  • greek
  • vietnamese
  • cyrillic

You need to lookup your font in Google Fonts website to check the supported subset. Each font may support different subsets.

5Choose elements that you would like to affect with specific font family. Setting it to Body will affect all elements.

6Save the settings.

Setting a Custom Font

If you want to add a font that is missing in the Theme Options > Typography, you can do this manually using a plugin or via css code.

Setting a Custom Font with a Plugin

There is a plugin that will give you a possibility to add a custom font without css knowledge. It’s so easy, just install the plugin Use Any Font.

1In your WordPress dashboard, go to Plugins > Add new and search for Use Any Font plugin.

typography

2Click on Install button and after that Activate button.

typography

3In WordPress dashboard on the left side go to Settings and select Use Any Font

typography

4Choose a font you want, then upload it.
5Click on Assign font to add the new fonts to your elements.

You can now use the new fonts for your website.

Setting a Custom Font via CSS

This allows you to use any font you want on your website.

1Download your font in a web format. You can then convert your font in a web format using Font Squirrel Webfont Generator.
2Create a new “fonts” folder in the child theme’s directory of your hosting server, and upload the webfont files there. You can use the FTP client like FileZilla  or your cPanel to do this.
3Load the font in your Child Theme’s “fonts” folder.
4Add the css code in your Child Theme’s style.css file and replace the font family and URL with your own. Assign a new font to the element you need.

@font-face {
font-family: Great Vibes; 
src: url(fonts/GreatVibes-Regular.ttf); 
font-weight: normal; 
}

h1 {
font-family: "Great Vibes";
}

You can now use your custom font anywhere in your theme’s stylesheet.

If there are any questions or you have difficulties setting a font, you can contact our support via Help Desk.

Did this answer your question?