The Divi theme by Elegant Themes now uses Google Fonts for its in-built font options. This is wonderful news for having plentiful options, but is also a crazy long list of options to choose from without being able to preview. If you were hoping to click through the fonts in the Theme Customizer, you’ll be wasting a lot of precious time before you even get to the end of the fonts starting with “A”. Ah, just not practical!

Too many options to preview in the Divi theme customizer font picker

Of course, it would be nice in theory if the font names were displayed in their actual font, but who really wants all that font-preview-functionality slowing down their website & page load speed?!

 

But the good news is: you can refine and preview all the Google Fonts at fonts.google.com!

 

Here’s how:

Browse and select your font from Google Fonts.

Refine your search by using the controls in the sidebar.

refine font search

 

Handy hints for refining:
Serif = fonts WITH the small decorative line attached to the end of strokes;
Sans Serif = fonts WITHOUT the small decorative line attached to the end of strokes;
Display = ‘extroverted’ fonts that call attention to themselves – generally working best in large sizes rather than a body font;
Handwriting = as it sounds: fonts that look handwritten because they are – can include printed or cursive styles;
Monospace = fonts where letters and characters each occupy the same amount of horizontal space.

 

Preview text:
You can type custom text directly into the font preview are to test. Click on the “APPLY TO ALL FONTS” option to see your custom text in all of the font previews.

preview specific text google fonts

 

Play around with the refine options to make your preview list manageable. And use the controls within font display area to preview variations if needed.

 

Even though you don’t need the code, as the fonts are already built in to the Divi theme, you may still like to click the “+” icon on your favourite fonts to keep a record of your shortlist until you’ve decided on ‘the one’.

select google font

 

Note:
Now, if you are only interested in seeing a preview of all of the earlier Divi fonts (their smaller range from earlier versions), you can also check out this cool resource: http://divifonts.diviguide.com/.

Want more module options for your Divi website?

Check out our Custom Modules for Divi
Browse Custom Modules