Jupiter Fonts (Typography)

Last Updated on

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.

x
Note: Please note that the text font sizes are stored in different location which can be found in Jupiter > Theme Options > Main Content > Texts.

In this article


Setting a Font Family

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

typography

2
Choose elements that you would like to affect with specific font family. Setting it to Body will affect all elements.
3
Click on pencil icon to choose font family.

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

x
Note: If you select Typekit fonts, you need add your Typekit Kit ID in Global Settings > API Integrations. How to integrate Typekit font you can find in the article here.
4
Select 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.

5
Save 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.

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

typography

2
Click on Install button and after that Activate button.

typography

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

typography

4
Choose a font you want, then upload it.
5
Click 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.

1
Download your font in a web format. You can then convert your font in a web format using Font Squirrel Webfont Generator.
2
Create 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.
3
Load the font in your Child Theme’s “fonts” folder.
4
Add 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.

x
Note: For more information, check out this forum topic or blog post.

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

Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket