Most WordPress themes and plugins nowadays come with a method to load and use Google fonts.

There could be times when you want to do this manually like in the case of Oxygen 2.0 not being able to render the “Nothing You Could Do” font on the frontend.

Follow the steps below to load a google font-family in your WordPress site:

Step 1

Install and activate Code Snippets plugin.

Step 2

Add a new Snippet having:

add_action( 'wp_enqueue_scripts', 'custom_load_google_fonts' );
/**
 * Enqueues google fonts.
 */
function custom_load_google_fonts() {

    wp_enqueue_style(
        'custom-fonts',
        '//fonts.googleapis.com/css?display=swap&family=Nothing+You+Could+Do:400',
        array(),
        '1.0.0'
    );

}

In the above replace Nothing+You+Could+Do with the string that’s shown in the EMBED tab after you have selected the font and clicked on the black bar near the bottom right edge of your browser.

400 represents the font-weight.

To add more available font weights, separate them by a pipe like so: Source+Sans+Pro:400,400i,600,700.

If you are using Oxygen, set the snippet to run on the front-end since Oxygen renders the fonts fine in its editor.

Step 3

Specify the font-family in CSS for your desired element(s).

Ex.:

.my-text {
    font-family: 'Nothing You Could Do', cursive;
}

This step is not needed in Oxygen as long as you have set this font in the editor.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Hi, I installed the plugin and added the code snippet on the front end, but I don’t see the font in the Oxygen builder. How can I make it appear there?

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: