• 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 » Food Blog Design and Appearance

    Font Styling

    Published: Jul 2, 2018 · Modified: Nov 24, 2021 by Skylar · Leave a Comment

    This post is outdated and should not be used or implemented.

    As of 2020, we no longer recommend any custom fonts on food blogs due to CLS, pagespeed and potential accessibility issues.

    Instead, all sites should be using system fonts.

    The customizer can only ever have a limited set of the possible CSS options. If looking to customize your theme beyond what's built into the customizer, you'll have to learn to use inspect element and learn some basic HTML and CSS.

    IMPORTANT: Do not ever edit your style.css or functions.php file. All changes should go in the "Additional CSS" screen in the customizer, or the code snippets plugin.

    Sometimes, you'll need to undo styling built into the themes (such as applying uppercase to all letters). Other times, you'll need to add it.

    IMPORTANT: stop viewing and modifying your blog on desktop. Make sure it looks good on mobile first. Roughly 80% of all pageviews now happen on mobile, and you should update things first and foremost for mobile displays.

    Let's take a look at the most request: styling the post title.

    You can see that the header is wrapped in an <h1> tag that has a class of "entry-title". The inspect element window also lists all the styling being applied to the selected element on the right side:

    If we want to change how the title is displaying, by changing the (font) color, font-size or uppercase for example, we simply have to override these in the "Additional CSS" screen of the customizer.

    We'll want to be fairly specific on what we're targeting with our new styling, so that we're not accidentally changing the styling on the homepage or category pages. In the case of this header, we'll use .single .post h1

    Note: getting the right CSS specificity for targeting the element is outside the scope of this, and is one reason why we don't recommend playing with styling.

    Combining Fonts

    There's an art and a science to selecting the right font combination for your header and body fonts. We recommend reviewing this visme.co post on pairing fonts.

    You should need a maximum of 1 font for your headers, and 1 font for your body. Sometimes, a third font can be used for accents, in a very minimal way. Each additional font slows pagespeed by increasing download time, and browser rendering.

    Use the Feast Plugin's Modern Google Fonts to implement your own custom fonts!

    Removing uppercase

    .single .post h1 {text-transform:none;}

    This overrides the text-transform: uppercase; that's being applied to all headings in Foodie Pro, and tells browsers to render text exactly as entered without transforming.

    Text-transform has a number of other options including:

    • capitalize: capitalizes the first letter of each word
    • lowercase: transforms all letters to lowercase
    • initial: the default value (typically, "none")

    Documentation: https://www.w3schools.com/cssref/pr_text_text-transform.asp

    Changing the font-size

    You can change the font size using the Feast Plugin's Edit Body Font Size.

    The font size in the themes was standardized to best practices for readability. We don't recommend changing this, but you can by over-riding the font-size on specific elements, eg.

    .single .post h1 { font-size: 22px; }

    There are a number of different units that you can use for non-paragraphs, but we feel "em"s (relative to the body size) is the best.

    Documentation: https://www.w3schools.com/cssref/css_units.asp

    Changing the line-height

    Similarly, the line-height was chosen based on the theme's default fonts, but may need to be adjusted for readability if changing fonts.

    You can change the site's overall line-height using:

    body { line-height: 1.8; }

    Note that this is specified as a number without units, which is treated the same as "em" (a multiple of the font-size).

    Changing the font-weight

    The post titles are styled with a font-weight: 700; which isn't very useful from a human perspective, but provides very fine-grained control for computers. Shay has an eye for these things, and through testing landed on 700, which is the equivalent of simply font-weight: bold; We can set the title to not be bold by using:

    .single .post h1 {font-weight: normal;}

    Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

    Changing the font's color

    Changing the font color is fine, within reason. Don't use anything too difficult to read.

    .single .post h1 {color: #FF000;}

    Note: the CSS property font color is simply "color", not "font-color".

    You can use this tool to select a color. We'd recommend using a color found elsewhere on your blog, not a brand new one specific to post titles.

    Be careful when changing the font color, as low contrast (text vs. background) can cause accessibility / readability issues, and may cause your site to be penalized in the future (to say nothing of irritating a growing number of your users). You can use this tool to check font color accessibility compliance.

    Documentation: https://www.w3schools.com/cssref/pr_text_color.asp

    Underlines

    In the online world, underlines are reserved for text that is a link. We wouldn't recommend adding underlines to the post titles.

    .single .post h1 { text-decoration: underline; }

    Documentation: https://www.w3schools.com/cssref/pr_text_text-decoration.asp

    Adding whitespace

    Whitespace makes the website more readable, but too much of it can confuse readers by making them think there's ads or images that aren't loading. The key here is balance, and that balance is something the themes are specifically designed for. We don't recommend messing with whitespace, but if you really want to, here are the defaults to override:

    .single .post h1 { margin: 0 0 17px 0 ;}

    Those 4 numbers (0, 0, 17, 0) refer to the top, right, bottom and left spacing in pixels. Adding 12 px to the top would make it: 12px 0 17px 0;, and adding 14 px to the left ("indenting") would make it 0 0 17px 14px;

    Documentation: https://www.w3schools.com/css/css_margin.asp

    Centering the title

    One thing you can do is, is center-align the title:

    .single .post h1 { text-align: center; }

    Brunch Pro's titles are center-aligned by default, but this matches the overall styling of the theme. Every other theme doesn't have text-align specified, which means it defaults to

    .single .post h1 { text-align: left; }

    If you only centered the title and nothing else on the site, it could look funny.

    Documentation: https://www.w3schools.com/cssref/pr_text_text-align.asp

    Other font styling changes

    We couldn't possibly cover every one of the dozens of properties that can be changed with CSS. Google is your best friend for any changes not found here.

    Why you shouldn't be playing with styling

    People trust websites that look familiar. The less obviously unique and crazy your site is, the easier it is for your readers to focus on your content. People visit food blogs to find recipes, not to see your picasso interpretation of web design.

    SUPER creative and customized, right guys?

    You run a food blog, not a clown college.

    It's also easy to screw up your website, by ruining accessibility with low-contrast colors or font-sizes that are too large or too small.

    Usually, you're creating more future work for yourself (risk) that doesn't have any reward (revenue) tied to it. It's a bad business decision.

    Always ask yourself: why am I making this change?

    Embedding local fonts

    Locally hosting fonts is probably the best way to implement custom fonts moving forward. This is currently outside the scope of what we support, so here are a couple third-party tutorials:

    • https://www.news47ell.com/how-to/host-google-fonts-locally-wordpress/
    • https://kinsta.com/blog/local-fonts/

    More

    • Horizontal scrolling
    • Subscribe button
    • Favicon
    • FSRI Block

    Reader Interactions

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Modern 404
    • Recipe Update Checklist
    • Recipe Post Template

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed Audit
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    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.