How to: See your theme's Google Fonts in the WordPress Page/Post Editor

sage
,
1

I’ve always really liked how Sage loads your theme’s stylesheet into the admin editor so that you can see your styles reflected as you edit your content, and I’ve found a couple of ways over time to extend that a little bit. Today, that was getting the font I’m using on my current project (from Google Fonts) to apply there.

When you use @font-face to load font files in your CSS, those fonts should be available in the admin editor with no extra steps–but if you’re using Google Fonts, that’s not the case. An extra couple of steps are required.

Note: This post originally used a method based on Tom McFarlin’s post here, adapted to Sage’s configuration. @alwaysblank came up with a much simpler method, and that’s what’s included here now. All credit to him!

Here’s what the front end looks like (what we’re trying to approximate in the editor):

front
front1920×2100 263 KB

The serif font used for the body is Merriweather.

Abstract your Google Fonts stylesheet URL
The Google Fonts stylesheet URL will be used in both your theme’s front end and WordPress admin, so let’s define it once for both. In setup.php:

function google_fonts_url()
{
    return 'https://fonts.googleapis.com/css?family=' . urlencode('Merriweather:300,300i,900,900i');
}

Replace the part inside urlencode with the appropriate families from your own Google Fonts URL. It’s encoded because otherwise WordPress would break the URL up where each comma is when we include it in the editor.

Note: if the font name has a plus in it, replace that with a space before encoding, like so (‘Open Sans’ instead of ‘Open+Sans’):

function google_fonts_url()
{
    return 'https://fonts.googleapis.com/css?family=' . urlencode('Open Sans:400,400i,600,800');
}

Your wp_enqueue_style line for adding the fonts to your theme’s front end should now look like this (also in setup.php):

wp_enqueue_style('google/fonts', \App\google_fonts_url(), false, null);

If you were using a different method to add the fonts to your theme, adapt these instructions as needed.

Add the Google Fonts stylesheet to the editor
To add the fonts to the TinyMCE editor, add the stylesheet URL to the list of URLs loaded in the editor by WordPress, using the mce_css filter. In setup.php:

add_filter('mce_css', function ($sheets) {
    return "$sheets," . \App\google_fonts_url();
});

Reload your editor page and enjoy
That should be all you have to do (but you may need to do a hard refresh)! Here’s how it looks for me:

back
back1441×1625 252 KB

7 Likes
2

@mmirus Thanks for the tutorial, really good.

One question, would this load google fonts twice if a font is also enqueued in app/setup.php?

Cheers,
Kieran

3

@KieranRoberts glad you liked it! Good question. Since the wp_enqueue_script action doesn’t run for admin requests, I would assume that the fonts would only be loaded the one time (from the extra editor styles created in the guide above).

If they did load twice, that would only happen in your admin area, at least.

1 Like
4

Out of curiosity, is there a reason not to do something like this, and skip all the SASS stuff?

function enqueue_google_fonts() {
    wp_enqueue_style('fonts/google', 'https://fonts.googleapis.com/css?family=Merriweather:300,300i,900,900i', false,
        null);
}
add_action('wp_enqueue_scripts', 'enqueue_google_fonts');
add_action('admin_enqueue_scripts', 'enqueue_google_fonts');

This removes any dependencies on SASS/SCSS, and loads your fonts in a non-blocking way (if you’re using @import then either the content of Google’s stylesheet is getting embedded in your stylesheet, which robs you of several neat things Google does based on requests to that URL, or it’s pulling in those fonts when the stylesheet is loaded, blocking render until the browser has downloaded the font files).

1 Like
5

My first reaction was “stop being so much smarter than me!”, but I think we need to use add_editor_style so that the fonts get loaded inside TinyMCE instead of just in the admin page itself. I believe add_editor_style requires a stylesheet located in the theme directory, though the docs mention another hook, mce_css, that might work along the lines you suggested. I may give it a try with that to see if it works tomorrow. Thanks for the idea!

1 Like
6

Excellent point re: add_editor_style()/mce_css! I hadn’t considered that. In that case, the following should work (assuming you’re writing these in a file with the App namespace):

function google_fonts_url() {
    return 'https://fonts.googleapis.com/css?family=Merriweather:300,300i,900,900i';
}
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('fonts/google', \App\google_fonts_url(), false,
        null);
});
add_filter('mce_css', function($sheets) {
    return "$sheets," . \App\google_fonts_url();
});
1 Like
7

Very nice. I’ll give that a shot tomorrow!

1 Like
8

Confirmed that this works! Will update the first post and give you credit.

Edit: actually, @alwaysblank, found a problem with that approach. Because mce_css takes a comma-separated list of stylesheet URLs, and Google uses commas in their font stylesheet URLs, this new method drops part of the URL. For example, //fonts.googleapis.com/css?family=Merriweather:300,300i,900,900i is loaded as //fonts.googleapis.com/css?family=Merriweather:300. You lose the additional font variants.

I’ll leave the original guide intact above, but also link down to your post for those who may want a simpler method and aren’t worried about this caveat.

1 Like
9

Excellent point. This updated version of google_fonts_url() resolves that issue by encoding the font definitions in the google URL:

function google_fonts_url() {
    return 'https://fonts.googleapis.com/css?family=' . urlencode('Merriweather:300,300i,900,900i|Corben:400,700');
}
1 Like
10

That seems to do it! I’ll update the post.

1 Like