How to use Google Fonts in TinyMCE

Google Fonts are hugely popular. They look nice, there are loads to choose from, and they’re free to use. So it’s only natural that you may want to use them in your online applications to provide a greater overall experience for your users.

But how do you use Google Fonts in TinyMCE?

In this article, we’ll show you everything you need to know to start using Google Fonts with the TinyMCE rich text editor. For our example, we’ll use a pairing of two of the top 5 most popular Google Fonts (at the time of writing): Lato and Roboto.

Complete example on CodePen:

Configuring TinyMCE styles

Before we begin...first, a note on configuring styles in TinyMCE. (I’ll assume you already know how to configure the editor by modifying the initialization script.)

TinyMCE uses a default CSS for the content displayed within the editor. However, there are two configuration options that you can add to the TinyMCE initialization script to customize it.

You can use content_css to override the entire default CSS with your own. For example:

tinymce.init({
  /* ... */
  content_css: "/mycontent.css",
});

Or, regardless of whether you’re using the default CSS or you’ve provided your own with content_css, you can make small tweaks to it using content_style. For example:

tinymce.init({
  /* ... */
  content_style: "body { color: red; }",
});

Okay – let’s get started.

1. Import custom fonts into TinyMCE

First, import the fonts using the @import rule. For example, if you’re customizing the editor CSS using content_style:

tinymce.init({
  /* ... */
  content_style:
    "@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Roboto&display=swap');",
});

Here, we’re importing Lato Black and Roboto Regular. Lato is a sans serif typeface that is serious but friendly with its semi-rounded details and has a great range of weights available. Lato Black has a bold structure that is great for display headings. We've paired this with Roboto Regular for its natural reading rhythm that makes it perfect for body copy. The Roboto typeface is one of the most popular choices available on Google Fonts and features a mechanical skeleton and largely geometric forms.

2. Set default font families in TinyMCE

Set the default font families for the body and header levels. In our example, we want to use Roboto in the body and Lato Black for headings:

tinymce.init({
  /* ... */
  content_style:
    "@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Roboto&display=swap'); body { font-family: 'Roboto', sans-serif; } h1,h2,h3,h4,h5,h6 { font-family: 'Lato', sans-serif; }",
});

At this point, when you initialize the editor with this additional configuration, text in the editor will be displayed using the chosen fonts.

Lato Black and Roboto fonts used as defaults in TinyMCE.

3. Render custom fonts on the TinyMCE dropdowns

To have custom fonts render correctly on the font and style dropdowns, import the fonts on the page in which the editor is initialized.

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Roboto&display=swap');

Heading styles displayed in Lato Black font.

4. Add custom fonts to TinyMCE menus

If you have configured TinyMCE so that users can choose a font from the menu or toolbar, you can list it as an available font using the font_formats option. For example:

tinymce.init({
  /* ... */
  font_formats:
    "Arial Black=arial black,avant garde; Courier New=courier new,courier; Lato Black=lato; Roboto=roboto;",
});

Lato Black and Roboto fonts displayed as options in TinyMCE menu.

It can be handy to know the default list so you can easily add to it, or remove from it as required:

tinymce.init({
  /* ... */
  font_formats:
    "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats",
});

5. Configure your page CSS

Even though the font has been configured and used in the editor, it doesn’t necessarily mean it will be displayed on your published pages. Your pages need to adopt the style in the same way. The best way to do this is to use the same CSS file for both the editor and your published content. That way, they’re always in sync.

What next?

Other font types can be used with TinyMCE in much the same way.

While we’re on the topic of customization, also check out:

There’s also one of our most popular articles – about how to get started with neon fonts and glowing text. And here's the resulting CodePen with a cool neon font in TinyMCE:

Not yet using TinyMCE on the cloud? When you’re on the cloud, you’ll always be up to date with the latest build and newest features. Get a free API Key and try it out (you’ll also get a free trial of all our premium plugins!)