• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Themes
  • Feast Plugin
  • Support
  • Tutorials
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Themes
    • Feast Plugin
    • Support
    • Tutorials
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » How To Customize Your WordPress Themes » Foodie Pro Classic Tutorials

    Custom Fonts with Foodie Pro

    All sites in 2021 and beyond should use the System Font setting in the Feast Plugin to override the theme fonts, which eliminates:

    • font-related CLS
    • pagespeed-related issues due to font downloads
    • missing character issues with fraction conversions in certain fonts
    • enhance user experience by using a default familiar, legible font used by all devices

    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.

    Primary Sidebar

    How To Customize Your WordPress Themes

    • Why is troubleshooting so complex?
    • Manually Disable Google Fonts
    • How Do I Set Up My Navigation Menu?
    • Can I Use Multiple Recipe Index Pages?
    • Customization Library
    • Add a Before Entry Widget Area
    • How to Create Multiple Recipe Index Pages
    • How to Add a Logo
    • How to Add the Featured Posts Category Index
    • How to Add the Visual Category Page Index
    • How to Change the Background Color of the Genesis eNews Widgets
    • Plugins to Install
    • Recipe Index: Content Configuration (Cravings Pro + Seasoned Pro)
    • Cravings Pro Theme: Setup Your Navigation Menu
    • WordPress Settings
    • How to Change the Header Size
    • Seasoned Pro Classic Tutorials
    • How to Create Multiple Recipe Index Pages
    • Food Blog Home Page Pagination
    • Install Theme, and Import Demo Content and Widgets
    • Why we're not supporting Gutenberg Oversized Images
    • Troubleshoot Plugin Conflicts
    • How Do I Update the Theme Version?
    • Remove Search Box from Navigation Menu
    • Font Size for Food Blogs
    • Image Alt Tags
    • Pinterest for Food Bloggers
    • How to Launch Your Food Blog
    • How to Set a Favicon
    • Why we don't support the read more tag
    • Setup a secondary navigation menu
    • How to clear your cache
    • How to change change your footer
    • Foodie Pro Classic Tutorials
      • Foodie Pro 3.0 FAQ
      • How Can I Update to Version 3.0?
      • How to Configure the Foodie Pro Recipe Index
      • How to Add a Logo to Foodie Pro 3.0
      • Configure the Foodie Pro Footer Widgets
      • Adding Social Icons to Foodie Pro Navigation Menu
      • How to Change the Header Size in Foodie Pro 3.0
      • Custom Fonts with Foodie Pro
      • How to Configure the Foodie Pro Classic Home Page
    • Brunch Pro Classic Tutorials
    • Cook'd Pro Classic Tutorials
    • Cravings Pro Classic Tutorials
    • All About Featured Images
    • FAQ for All Themes
    • Add Google Analytics Tracking Code
    • Customization Referrals
    • Enable SSL for HTTPS on your Food Blog
    • Genesis Child Themes
    • How to Start a Food Blog
    • Set Up Your WooCommerce Shop
    • The parent theme could not be found. You will need to install the parent theme, genesis, before you can use this child theme
    • Food Blog Theme Features Comparison
    • Translation + Multi Language Support
    • Use Inspect Element to troubleshoot styles

    Free 5-Day Branding Design Challenge

    With this actionable 5-part challenge, you'll have just the digital design strategies you need for a profitable website... and best of all, it's free. Signup and get your first challenge delivered immediately!

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2022 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.