The way you change fonts and font sizes of titles and text in WordPress depends on two factors: the theme you are using and the purpose of the changes.
Some themes allow you to control every detail on global level and even add page-specific CSS-modifications. Others don’t let you style titles and text at all or limit your choices too much. This post will help you find a styling solution, no matter which is your case.
We’ll also delve into the world of CSS IDs and classes, as well as @media queries, allowing you to perform advanced style modifications, resulting in different fonts and font sizes being displayed on different spots of your pages or on different screens (for example, a title on desktop should be prominent but you should make a title on mobile devices considerably smaller to fit the screen and the overall page design).
WordPress Themes with Advanced Font Control
NB! Please be aware that theme options differ depending on the theme you are using! Therefore, the names of different theme options, the exact way they work or their availability can vary.
As the demand for flexibility and ease of use is growing, most premium and many free WordPress themes are today offering a fully functional Typography (the name can vary) panel in their Theme options. It can be accessed via your themes’ options tab.
The looks of the Typography panel can differ, as well as the exact options that it gives you. Most often, you can choose font and font size for headings (h1 to h6) and for text. The more advanced themes allow you to choose different fonts and font sizes for each of the six headings, as well as to capitalize some or all headings.
You can control each styling aspect, including font, font-size, line height, and case. In this case, the theme uses Google Fonts, which is popular practice among web developers. In other cases, you can choose among fewer, locally hosted fonts.
Sometimes, you can also set the font color, as shown in the screenshot below.
You can freely experiment with settings and change them many times. Changes apply globally on the site, meaning that you cannot make per-page alterations of font and font sizes of titles and text from within the Theme Options.
To make it easier for you to navigate in the world of WordPress headings and text types, they are explained below:
- H1: The primary heading of the page. The text, you enter in the title field of a post or page is tagged as H1. As a rule, you should only use one H1 on any given page.
- H2: The primary in-text heading, used for section titles.
- H3-H6: Secondary in-text headings. Most WordPress users use only H1-H3. H4 or H5 is, however, often used as default widget title in sidebars and footer. You should therefore consider carefully, which font and font size you should use for it.
- Headings: All headings (H1-H6).
- Primary text: The text on pages and in posts.
- Secondary text: Used for breadcrumbs and widgets in sidebars and footer, as well as subheadings.
- Menus: Some themes style menus using the settings of one of the six headings. Others allow you to freely style menu items. This is, however, not done from the Typography section but from the section Top Bar & Header -> Menu (the exact names and path can vary).
- Top bar, header, and footer: Most of the time, text in these sections are styled, using the style of one of the text types above. In some cases, you can customize them independently from Theme Options->Top Bar & Header/Footer & Bottom Bar.
These style modifications meet most WordPress users’ needs. However, if your theme is limiting you too much, jump down to the next sections, discussing custom changes of fonts and font sizes of titles and text in WordPress.
Theme-Independent Customization of Fonts and Font Sizes in WordPress
You can change fonts and font sizes of titles, text, widgets, header, footer, and elements within specific elements of pages theme independently, by using CSS.
CSS stands for Cascading Style Sheets and is what gives the design of web pages. CSS can be used in three ways: by consolidating CSS in single or multiple files that are then linked to each page they apply to; by inlining small CSS directly in the HTML document; and by overwriting parts of CSS files to modify the look of specific elements globally or on specific pages/sections.
As a WordPress user, you most likely already use a theme with one or multiple style sheets and inline small CSS in the HTML file (for example, when changing the color or text). If these two methods aren’t enough to meet your customization needs, you can turn to the third method: overwriting CSS.
You can overwrite CSS in two ways: by creating a child theme or applying CSS directly to your current theme via WordPress’ Customize option, the theme’s own CSS customization option, or a plugin.
Note! If you are unsure about how to work with child themes, CSS or CSS customization plugins, please follow the links above for free, quick introductory courses on the topic.
No matter which option you choose, CSS customizations work exactly the same way.
Changing Fonts and Font Sizes of Titles and Text in WordPress
Titles (or headings) in WordPress are tagged with h1, h2, h3, h4, h5, and h6. Text is tagged with p. To change the styling of a heading or text with CSS, you should simply write a CSS rule, using the element selector and the desired styles in the CSS declaration block.
The example below is set to modify the global appearance of h2 as follows: font size 22, line height 32, color grey, style bold, uppercase, underlined.
h2 {
font-size: 22px;
line-height: 32px;
color: grey;
font-family: "Montserrat", Helvetica, sans-serif;
font-weight: 700;
text-transform: uppercase;
border-bottom: solid 1px black;
}
It is rare that you would want to modify so many properties of a single element, however, the example is designed to be used as a template for the changes you want to make. All unnecessary lines can simply be deleted. To change another heading, exchange h2 in the example with the desired heading’s tag or with p to modify paragraph styling.
CSS Properties and Values
When working with CSS, you should always remember these 4 things:
- Use the correct selector
- Use opening and closing curly brackets
- A property should always end with a colon and be accompanied by a value
- Use semicolons after each CSS declaration to separate them from each other
Each CSS property supports a limited number of values. Below, you can find the list of supported values for the CSS properties, used in the example above.
Changing font size and line height is done by choosing their pixel height. In theory, you can choose any value you wish. In practice, keep fonts between 10px and 60px. Anything beyond these values is too small or too big for web pages. As a rule, line height should be a bit higher than font size, for example 5px to 15px higher. Headings need more space, which requires a greater value for line height.
When changing font color, you can use either the name of the color (as in the example), the rgb, rgba, or hex code of the color for precision. Rgb and rgba colors are used by typing rgb(xx,xx,xx) or rgba(xx,xx,xx,xx), where xx are the color values.
Changing the font is done by choosing a primary font family (the one in the quotation marks), fallback fonts, and a fallback typeface, if the client can’t use any of the chosen fonts. To use a font, you must have it installed on your site. Most sites come packed with a number of fonts, usually the free library of Google fonts. You can normally find a list of the included fonts on your theme developer’s site. As long as you don’t like any of the installed fonts, you can choose to install custom fonts (a step-by-step guide on installing custom fonts is coming up next, so stay tuned).
Font-weight is a font-dependent value. Not all fonts can be manipulated using any font weight, as they are programmed to only be used with certain styles. The font weight property supports the following values: 100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold, bolder, lighter, inherit (from other elements or a stylesheet), initial (sets the value back to default). As long as you try to apply a value that isn’t supported by the font, the font will be styled with the closest available option.
Text-transform allows you to modify text. It supports the following values: none, capitalize, uppercase, lowercase, inherit, and initial.
Border-bottom allows you to insert a line beneath text. The line can be styled using applicable values for: style, color, and thickness. You can also insert lines on the sides or on top of elements, using border-left, border-right, and border-top properties. The border property supports the following values: none, hidden, dotted, dashed, solid, inherit, initial, double, groove, ridge, inset, and outset.
Instead of border-bottom, you can choose to use text-decoration. This property supports the following values: overline, underline, line-through, none, initial, and inherit. Additionally, you can style text-decoration by using text-decoration-color and text-decoration-style. Text-decoration-style supports the following values: solid, dotted, dashed, wavy, double, initial, and inherit.
Changing the Font and Font Size of Individual Elements
Changing fonts and font sizes globally in WordPress is easy. What is more complicated, is to only change individual elements’ styling, while not messing with the global style of the site. This is done by using class and ID CSS selectors.
Some themes allow you to add custom classes and IDs to elements, such as pages, rows, images, etc. If you, however, don’t have that option but still want to modify a single paragraph’s or heading’s font or font size, you can add custom ID (or class) to it, which will then allow you to refer to it in CSS. IDs should be unique, while classes can be used to group similar elements.
To style a single element, you have to first wrap the element and add a custom ID as follows (p can be replaced with a or another HTML element, depending on which element you are styling):
<p ID="unique-id">Here comes the heading or text you want to mark with the ID. For the sake of this example, let's say this is a h2 element.</p>
To style a group of similar elements at several places on your site but not globally, you have to use a custom class. You use it by wrapping each of the elements you want to style with a HTML tag and assigning the same class name to each of them as follows:
<p class="class-name">Here comes each of the paragraphs you want to style, one-by-one, of course.</p>
Next, you have to refer to the ID or class in CSS and style the element(s) as you want. The following example shows how to style a single h2 using a custom ID and then how to style multiple paragraphs, using custom class.
#unique-id h2 {
font-family: "Montserrat", Arial, serif;
font-size: 30px;
line-height: 40;
color: #000000;
}
.class-name p {
font-family: "Exo", Arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333333
}
Remember to always save your changes and only make one change at a time, in case something goes wrong!
That’s it. Now you have successfully changed the font, font size, line height, and color of a single h2 and multiple paragraphs on your site, without changing any settings globally.
Changing Font and Font Size of Titles and Text on Small Screens
As we live in a mobile world, it’s a must that any website features a responsive or mobile design. While mobile themes are made to work on mobile devices, responsive themes tend to present you with a challenge here and there due to an element not resizing correctly.
In such cases, you have to make the problematic elements fit the diverse mobile screens yourself. No worries, this isn’t as difficult as it sounds. You can use CSS, exactly as shown above, with the only difference that you have to nest the snippets in a @media query.
Media queries are expressions that define, when specific CSS styles should be loaded. This means in practice that you can have general settings for desktop, which you then customize to make your pages look good on most screens.
Media queries look as follows (you can freely define screen size or choose to only apply max or min limit, you can also use some of the other available media types – all, print, and speech):
@media screen and (max-width: 999px) and (min-width: 740px) {
}
You can then nest any CSS that should apply to the @media query. Just remember to keep the double curly brackets, as the example shows:
@media screen and (max-width: 699px) and (min-width: 520px) {
h2 {
font-family: "Exo", Montserrat, serif;
font-size: 34px;
line-height: 40px;
}
}
You can use as many different media queries, as you wish, as long as you don’t nest any conflicting CSS declarations in them.
That’s it. Now you should be able to solve any font, font size, color, etc. customization tasks on your site. If still in doubt, write to us, we’ll be happy to help you out!
