Typography generally has a learning curve for most people, even developers. We normally do not include extensive font options in our themes because of that. We usually refer customers to seek out a font plugin—and we still do because they are more comprehensive.
However, this theme is unique compared to our other themes because of the LARGE text we use for various elements. Not everyone will want to use oversized fonts as we did, so it was important to include some typography options for this theme.
But as we state, typography and themes can have a steep learning curve. You generally have a few options:
- Manually customize fonts and text-based elements in a page
- Use a font plugin
- Just use the existing styling that comes with the theme
Typography, as it applies to fonts and font management can be overwhelming, so we gave you some help in this area by adding a Typography section to the customizer.
We also sectioned off several settings to keep it more organized.
- Body Font
- Headings Font
- Headings Weight
- Headings Case
- Headings Letter spacing
- Main Content Text
- Page Title Sizes
- Heading Font Sizes
- Drop Cap Option
Setting Your Body or Heading Font
These two settings are using a dropdown select list, but to see it, make sure you delete any existing font you see in the field. Simply click on the field to open up the list and select the font you want. Unfortunately, the drop-down does not offer a sample of each font, so you will need to visit Google Fonts.
NOTE: We did not include all Google fonts because there are 1000’s of them. If there is a Google font you want but it’s not in the list, you can request it be added for a theme update. You also have the option to install a Google fonts plugin, if that works better for you.
Helpful Font Info Links
- Fonts Information: If you need to learn more about fonts and typography, we recommend you start with the W3Schools website for Fonts.
- Text Styling: They also have information about CSS Text.
- Google Fonts
- Languages: This is probably the most confusing part, is the “Languages” support, so language support info might help.
Basic Font Settings
With this theme, we’ve included the ability to add fonts and basic styling for them, but we also added the main font/text styling for the following:
- Global text size – For all text
- Custom Image Header Title – This is the front page header image banner title
- Archive Titles – These are the titles on the page. For example, category titles.
- Full Post Banner Titles – These are the titles that are located on your cover banners (pages and posts)
- Full Post Default Titles – When your post is not using a cover image banner, these are the standard titles
- Full Post Default Titles (Top Titles) – when using the full post top layout, the title is above the featured image
- Page Titles – These are for “page” only titles
- Minimum Blog Style Titles – When using the minimum blog layout, this is your blog summary titles
- Widget Titles – Strictly for the widget titles
For in-page headings, such as h1, h2, h3, h4, h5, and h6, we kept the sizing options separate. You can change the size by typing it in, or you can use the little arrows to the right of the text field when you mouse over each one.
How We Use Sizes
With the exception of the Global Text Size setting (which uses percent), all other font sizing is based on a vw unit. I won’t bore you with the technical aspects of this, but this helps your text be responsive in a much better way than px, %, and even em.
Each font setting has some info giving you the default size for this theme (and setting). Each one also gives you a maximum size you can enter in. When you use the arrows on each field, it does it with 0.25 increments.
Do You Still Need Help?
If you find this is overwhelming, or you have some text that you are trying to change the size of, please submit a support ticket and we will be happy to help guide you through.