Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

Feast Design Co. » How To Customize Your WordPress Themes » Foodie Pro Tutorials » Custom Fonts with Foodie Pro

Custom Fonts with Foodie Pro

Note: As of May 2018 we no longer recommend using Google fonts, or custom fonts imported from external websites. This is because:

  1. They slow down page loading speeds
  2. Visitors don’t really care about custom fonts
  3. External fonts may be non-GDPR compliant

Instead, head over to https://fonts.google.com/ and use the preview text to create your header logo:

Then crop and resize down:

And upload it using your Admin > Appearance > Customize > Header Image screen.

Note: some additional work is required on versions older than 3.1.5. We recommend updating to the most recent theme version rather than trying to work on old themes.

Update: 2019/02/01

Google has updated how they want fonts to be incorporated, and this is now beyond what the font customizer was designed for. We recommend hiring a developer to implement fonts properly: Use font-display to render custom Google Fonts

Archive:

For added flexibility, we have included 19 of Shay’s favorite Google webfonts in the customizer options:

  • Abril Fatface
  • Adamina
  • Coustard
  • Coutive Mono
  • Droid Serif
  • Karla
  • Lato
  • Libre Baskerville
  • Muli
  • Nunito
  • Oswald
  • Pontano Sans
  • PT Sans Narrow
  • PT Serif
  • Playfair Display
  • Questrial
  • Raleway
  • Roboto Slab
  • Trocchi

You can set any of these typefaces to work for your body, accent fonts, and headings.

Sometimes you already have a font in mind that works for your brand, or other custom fonts from fonts.com.  And I get that.  To override the Customizer settings (the typography panel of the customizer will be disabled) and use your own Google webfont, place the following snippet at the bottom of your functions.php file.

Replace Droid Serif and Open Sans with the fonts that you want to use (correct codes can be found at google.com/fonts).  Then, you can easily change your stylesheet to use your selected fonts. 

//* Load Google Fonts 
add_filter( 'foodie_pro_disable_google_fonts', '__return_true' ); 
add_action( 'wp_enqueue_scripts', 'foodie_enqueue_syles' );
function foodie_enqueue_syles() {
wp_enqueue_style( 'foodie-pro-google-fonts', '//fonts.googleapis.com/css?family=Droid+Serif:300,400,700|Open+Sans:300,400', array(), foodie_pro_THEME_VERSION );
}

How Do I Edit My Theme Files?

Best Practices

Each font that you include from a third party source (eg. fonts.google.com) increases page load times, which can hurt your user experience and search engine rankings.

We recommend that you don’t use any external fonts, but if you do, ensure the fonts are loaded with async/defer.

As of 2018, we recommend foregoing custom fonts altogether and sticking with the default fonts.

Reader Interactions