How To Get Missing Google Fonts In Oceanwp

How to Add and Manage Google Fonts in OceanWP

OceanWP is a versatile theme that comes with over 150 Google fonts according to its documentation. However, Google hosts more than 1,200 fonts, and you may not always find your desired font within the provided selection. If you encounter this issue, you might wonder how to add your preferred Google font to OceanWP. This guide will walk you through various methods to do so.

Reason for Limited Font Selection in OceanWP:
OceanWP does not include every single Google font because it aims to keep your site fast and avoid connecting to the Google API. Instead, the theme provides a selected list of fonts that are regularly updated.

Method 1: Adding Fonts Using Customizer CSS:
To add a font not listed in OceanWP’s Customizer, click the blue ‘+’ circle on the desired font style in Google Fonts. Next, copy and paste the @media code into the Customizer CSS section. However, this approach is not very elegant, as you will need to assign the heading, style, and HTML element in the CSS. Additionally, this method overrides the theme’s font, resulting in two places to manage font styles.


A Better Way To Add Google Fonts In OceanWP

An improved method to add unlisted fonts is by inserting a small code snippet into OceanWP’s child theme. In the child theme’s functions.php file, add the following code, replacing ‘Inria Sans’ with your desired Google font name.

function my_new_fonts( $array ) {
    $array[] = 'Inria Sans';
    return $array;
add_filter( 'ocean_google_fonts_array', 'my_new_fonts' );

Now your chosen font should be available for use in OceanWP.

Host OceanWP Google Fonts Locally

Consider hosting Google fonts locally to comply with GDPR and potentially improve loading speed.

1. Go to Customizer, via Appearance > Customize

2. Navigate to Typography > General

3. Check the box for the “Google fonts from site” option.

Only Load A Limited Set Of Google Fonts In OceanWP

Alternatively, if you don’t want to see the full set of Google Fonts in OceanWP, follow this link for a custom php snippet that will limit you to only the fonts you use or a preferred set of Google Fonts.