How Do You Change the Font Size on WordPress?
Changing the font size on your WordPress site is a simple yet powerful way to enhance readability, improve user experience, and better align your website’s design with your brand identity. Whether you’re a beginner just starting out or an experienced site owner looking to fine-tune your content presentation, understanding how to adjust font sizes can make a significant difference in how visitors engage with your pages.
WordPress offers multiple ways to customize typography, from built-in editor options to theme settings and plugins, each catering to different levels of technical expertise and design needs. By mastering these methods, you can ensure your text is not only visually appealing but also accessible across various devices and screen sizes. This flexibility allows you to create a polished, professional look that keeps your audience coming back.
In the following sections, we’ll explore the various approaches to changing font size on WordPress, helping you choose the best method for your specific goals. Whether you want quick adjustments or more detailed control over your site’s appearance, you’ll find practical tips and insights to make your content stand out with the perfect font size.
Changing Font Size Using the WordPress Block Editor
The WordPress Block Editor, also known as Gutenberg, provides a straightforward way to change font sizes directly within your content blocks. This method is ideal for users who want to adjust font sizes on a per-block basis without editing code.
To modify the font size within a paragraph or heading block, first select the block you want to edit. On the right-hand side, in the block settings panel, locate the “Typography” section. Here, you will find options to change the font size by selecting from predefined sizes such as Small, Normal, Medium, Large, and Huge, or by entering a custom size in pixels.
Adjusting font size in the block editor affects only the selected block, allowing for granular control over your page’s typography. This method is particularly useful for emphasizing specific text elements or creating hierarchy within your content.
Customizing Font Size with Theme Customizer
Many WordPress themes include font size settings accessible through the Theme Customizer. This approach allows you to change font sizes globally or for specific elements like headings, body text, or menus, depending on your theme’s options.
To access these settings, navigate to **Appearance > Customize** in your WordPress dashboard. Look for typography or font settings, which might be under labels such as “Typography,” “Fonts,” or “Theme Options.”
Within these panels, you can typically adjust font sizes via sliders, dropdown menus, or input fields. Changes made here apply site-wide, ensuring consistent typography without manual adjustments on individual pages or posts.
Keep in mind that the availability and range of font size options depend on your active theme. Premium themes often provide more extensive typography controls compared to free themes.
Using Custom CSS to Change Font Size
For advanced users or when theme and editor options are insufficient, applying custom CSS is a powerful way to control font sizes across your site. Custom CSS allows you to target specific HTML elements or CSS classes and define exact font sizes.
You can add custom CSS by going to **Appearance > Customize > Additional CSS** or by using a child theme’s stylesheet. This method requires familiarity with CSS selectors and properties.
Example CSS to change body text and heading font sizes:
“`css
body {
font-size: 16px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
“`
This code sets the base font size for paragraphs and adjusts sizes for H1 and H2 headings. You can customize selectors to target specific areas, such as `.entry-content p` for post content paragraphs or `.site-title` for the site header.
| CSS Selector | Description | Example Font Size |
|---|---|---|
| body | Default text for the entire site | 16px |
| h1, h2, h3 | Headings of different levels | 36px, 30px, 24px |
| .entry-content p | Paragraph text within posts or pages | 16px |
| .menu-item a | Navigation menu links | 14px |
Using Plugins to Adjust Font Size
If you prefer a user-friendly interface or require more customization options, font size plugins can simplify the process without needing to touch code. Many plugins offer visual controls for typography, including font family, size, weight, and color.
Popular font management plugins include:
- Easy Google Fonts: Integrates Google Fonts with WordPress Customizer and allows you to adjust font sizes globally or per element.
- WP Google Fonts: Enables adding Google Fonts and customizing font sizes for headings and body text.
- YellowPencil: A visual CSS editor that allows you to click on any element and adjust its styling, including font size, in real time.
When choosing a plugin, consider compatibility with your theme and other plugins, as well as performance impact. Always back up your site before installing new plugins.
Best Practices for Choosing Font Sizes
Selecting appropriate font sizes enhances readability and user experience. Keep these guidelines in mind:
- Maintain a base font size between 16px and 18px for body text to ensure legibility on all devices.
- Use larger font sizes for headings to establish content hierarchy.
- Avoid excessive font size variations to maintain visual consistency.
- Test font sizes on various screen sizes, including mobile devices.
- Consider line height and letter spacing alongside font size for optimal readability.
By following these practices and leveraging the tools described above, you can effectively control font sizes on your WordPress website to create a polished, professional appearance.
Adjusting Font Size Using the WordPress Block Editor
The WordPress Block Editor (Gutenberg) provides a straightforward method to modify font sizes directly within your content blocks. This is especially useful for posts and pages where you want to emphasize certain sections or improve readability.
- Select the Text Block: Click on the paragraph, heading, or any text block you wish to edit.
- Access Typography Settings: In the right-hand sidebar under the “Block” tab, locate the “Typography” section.
- Choose a Font Size: Use the preset options like Small, Normal, Medium, Large, and Huge or enter a custom value in pixels (px) to specify the exact size.
- Preview Changes: The font size adjusts immediately within the editor, allowing you to see the impact in real-time.
Note that font size changes made in individual blocks affect only those blocks unless you apply styles globally through your theme or custom CSS.
Modifying Font Size via the WordPress Customizer
For site-wide font size adjustments, the WordPress Customizer offers an efficient solution without requiring coding knowledge. This approach depends on your active theme’s support for typography customization.
- Navigate to Appearance > Customize: Access the WordPress Customizer from the dashboard menu.
- Locate Typography or Font Settings: Different themes label this section variously; look for “Typography,” “Fonts,” or similar.
- Adjust Font Sizes: Modify font sizes for body text, headings, and other elements using sliders or input fields.
- Publish Changes: Preview how your changes affect the site before clicking “Publish” to apply them globally.
| Theme | Font Size Options | Customization Level |
|---|---|---|
| Twenty Twenty-Three | Body, Headings, Custom CSS | Moderate |
| Astra | Body, Headings, Buttons | High |
| GeneratePress | Global Typography, Responsive Sizes | High |
Changing Font Size with Custom CSS
For precise control beyond built-in options, custom CSS allows you to target specific elements and define exact font sizes. This method requires familiarity with CSS syntax and selectors.
- Access Additional CSS: Go to Appearance > Customize > Additional CSS.
- Identify CSS Selectors: Use browser developer tools (Inspect Element) to find the class or ID of the text element you want to modify.
- Write CSS Rules: Define font size using properties such as
font-sizein pixels, em, rem, or percentages. - Example:
p.custom-text {
font-size: 18px;
}
h2 {
font-size: 2.5rem;
}After entering your CSS, preview the changes and then publish to apply them across your site. Using relative units like em or rem improves accessibility and responsiveness.
Utilizing Plugins to Control Font Size
If you prefer a plugin-based approach to manage font sizes without manual CSS editing, several reliable plugins can help. These plugins often come with visual controls and additional typography features.
- Easy Google Fonts: Integrates with the WordPress Customizer, allowing font family and size changes for various text elements.
- WP Google Fonts: Enables adding Google Fonts with customizable font sizes and styles.
- Advanced Editor Tools (formerly TinyMCE Advanced): Enhances the classic editor with font size dropdowns and formatting options.
| Plugin | Key Features | Best For |
|---|---|---|
| Easy Google Fonts | Customizer integration, live preview, multiple font controls | Users wanting visual font management without coding |
| WP Google Fonts | Google Fonts integration, font size and weight control | Sites needing expanded font options |
| Advanced Editor Tools | Enhanced editor toolbar, font size dropdowns | Classic editor users wanting better formatting tools |