• 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
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • 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

    • How to Create Multiple Recipe Index Pages
    • How to Set a Favicon
    • Plugins to Install
    • How to Change the Header Size
    • How to Change the Background Color of the Genesis eNews Widgets
    • Font Size for Food Blogs
    • Why is troubleshooting so complex?
    • How to Launch Your Food Blog
    • Add a Before Entry Widget Area
    • Recipe Index: Content Configuration (Cravings Pro + Seasoned Pro)
    • How Do I Set Up My Navigation Menu?
    • Can I Use Multiple Recipe Index Pages?
    • How Do I Update the Theme Version? (without the Feast Plugin)
    • Remove Search Box from Navigation Menu
    • How to Add the Visual Category Page Index
    • Customization Library
    • Setup a secondary navigation menu
    • How to clear your cache
    • Troubleshoot Plugin Conflicts
    • How to Add the Featured Posts Category Index
    • Food Blog Home Page Pagination
    • Cravings Pro Theme: Setup Your Navigation Menu
    • Why we're not supporting Gutenberg Oversized Images
    • Install Theme, and Import Demo Content and Widgets
    • How to change change your footer
    • Seasoned Pro Classic Tutorials
    • Manually Disable Google Fonts
    • Image Alt Tags
    • Why we don't support the read more tag
    • Pinterest for Food Bloggers
    • How to Create Multiple Recipe Index Pages
    • WordPress Settings
    • Foodie Pro Classic Tutorials
      • Foodie Pro 3.0 FAQ
      • How to Configure the Foodie Pro Classic Home Page
      • 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
    • 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
    • Genesis Child Themes
    • Enable SSL for HTTPS on your Food Blog
    • 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
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • 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 © 2023 · 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.