Typography - Customizer

The OceanWP Customizer Typography panel enables you to apply global typography options for your website:

Default theme settings may differ if you have imported one of the OceanWP prebuilt website templates for WordPress. This is because these templates come with their own Customizer settings. However, the way you use the Customizer to adjust your website remains the same.

Google Font Settings

The Google Font Settings panel contains all options related to Google Fonts.

Your OceanWP theme contains over 1500 Google fonts, so basically all of them.

By default, the Google Fonts feature is disabled. To be able to use Google fonts across your theme, you need to enable it first.

Google font list displayed in the Customizer typography option
When the Google Font feature is enabled, you can use any of the available Google fonts in typography settings.

Google Font Settings panel includes the following options:

  • Enable Google Fonts: toggle the button to enable / disable the option to use Google fonts within the OceanWP theme Customizer.
  • Load Google Fonts Locally: contains all features that enable you to host all Google fonts directly on your website with a single click and without needing to upload fonts to your website, while at the same time making your website GDPR-friendly.
  • Google Font Subsets: enables you to choose between specific font subsets (depends on the font itself).

Enable Google Fonts

Toggle the button to enable or disable the option to use Google fonts within your OceanWP theme Customizer and apply specific fonts.

By default, this feature is disabled.

Enable Google Font Settings in the Customizer
Toggle the Enable Google Fonts feature to display additional options in the Customizer

Once the feature is enabled, additional options will appear.

Load Google Fonts Locally

The Load Google Fonts Locally section contains all available options that help you apply best options for your website:

Enable Local Google Fonts

The Enable Local Google Fonts option does its magic on its own.

Basically, any Google font you select in the Customizer will automatically be hosted from your website, making your website faster and GDPR-friendly at the same time.

Load Google fonts locally on WordPress website with OceanWP

Learn more about the OceanWP Local Google Fonts option.

Apply on Elementor

The Apply on Elementor option empowers you with more designer freedom for free, by enabling you to host any Google font used within Elementor page builder to be hosted on your website.

The Apply on Elementor feature has 2 dependancies:

  1. Enable Local Google Fonts option must be enabled.
  2. Elementor (free or pro) plugin must be installed on your website.

Load Elementor Google fonts locally with OceanWP

Learn more about how to use OceanWP typography in conjunction with Elementor for best results, and how the OceanWP local Google fonts are applied on your Elementor designs.

Preload Local Google Fonts

The Preload Local Google Fonts option is a performance feature.

If enabled, this feature tells the browser to start downloading fonts immediately for faster content rendering.

Preload Google fonts for faster content rendering and loading speed

Font preloading also improves perceived loading time.

Font Format

The Font Format option enables you to choose the font format for your OceanWP locally stored Google fonts. There are three available options:

  1. TTF: slower loading time, mainly used by outdated browsers and mobile devices.
  2. WOFF: intermediate loading time, smaller file size compared to TTF. Supported even by some extremely early versions of web browsers.
  3. WOFF2: fastest loading time, smallest file size. Supported by later versions of web browsers.

Select preferred font format for local Google fonts

Our recommendation: use WOFF2 for your local Google fonts option.

Check out the WOFF and WOFF2 browser compatibility for more information.

Google Font Subsets

The Google Font Subsets feature functions whether you use Google fonts locally or not aka it's totally independent.

Google font subsets is a list of scripts supported by a font family. Whether a specific script is support depends entirely on the font family. This means that, even if you enable specific font subsets, if the font family you choose doesn't support these options, your settings will not be applied.

Google Font Subsets is a legacy feature. With the new OceanWP Customizer (OceanWP version 4.0.0 and above), you can apply a subset for every available typography option.

Available Google font subsets are:

  • latin: default option,
  • cyrillic,
  • cyrillic-ext (extended),
  • greek,
  • greek-ext (extended),
  • viatnemese.

Additionally, some font families offer more font subsets. You will be able to apply specific font subsets for each typography option respectively.

How to add Google Font Subsets

To add a new Google font subset:

  1. Click in the field,
  2. Select a subset from the list,
  3. Click on the subset to add it,
  4. Publish changes.
add Google font subsets in the Customizer
Adding Google font subsets

How to remove Google Font Subsets

You can remove any or all Google font subsets at any point:

  • Clicking the main "X" in the options window will clear all choices.

remove Google font subset choices in the Customizer

  • Clicking the "X" next to a specific font subset will remove only that subset.

removing a specific Google font subset from the choices list

Global Typography Settings

Global Typography Settings live up to their name. These options enable you to apply specific settings on a global level, while still being able to apply more options to specific website areas, like the Menu, footer menu, blog posts, etc.

Available Global Typography Settings include:

  • Body: applies the selected font settings to your entire website. Some of the settings, like the Font Size, will only be applied to the paragraph (textual) parts of your website. You will still be able to choose and apply specific options for each website section respectively, regardless of the Body font settings.
  • All Headings: applies selected font settings to absolutely all headings on your website (H1, H2, H3, etc). You will still be able to choose and apply specific options for each heading individually, as well as each website section respectively.
    • H1: applies selected font settings to all H1 headings on your website.
    • H2: applies selected font settings to all H2 headings on your website.
    • H3: applies selected font settings to all H3 headings on your website.
    • H4: applies selected font settings to all H4 headings on your website.
    • H5: applies selected font settings to all H5 headings on your website.
    • H6: applies selected font settings to all H6 headings on your website.

OceanWP WordPress Customizer global typography settings

Recommended Global Typography Settings

These are our recommendations for fastest and optimal results:

  • Body: choose optimal settings for paragraph (textual) parts of the website. You will still be able to set all typography settings for each website part respectively.
  • All Headings: choose the main font family for all Headings. You will still be able to set all typography settings for each website part respectively.
    • H1, H2, H3, H4, H5 and H6: apply settings based on the appearance of these headings in the content, for example, in blog posts. You will still be able to apply different typography settings for each website part respectively.

Found an error in this doc or believe it needs improvement?

Send us a prepurchase ticket, include the URL of the page, and add suggestions and more details about how we can make things better for you.

That's it!

Happy website building!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.