Home > CMS Tutorial > WordPress > Guide to adjusting font size in WordPress

Guide to adjusting font size in WordPress

王林
Release: 2023-09-07 17:37:01
Original
1406 people have browsed it

Changing the font size in your WordPress site can be done quickly and easily for a small section of text, but it may require more work if you want to make changes to a larger section of text. p>

In this quick tutorial, I will show you how to change font size in your WordPress website.

I will show you two quick methods:

  • Change font size within a single block
  • Add a CSS class to the block and then style the class

I'll also show you how to change the font size for your entire website by editing your stylesheet.

If you want to learn how to add a brand new font to WordPress or change the font color, you can learn how here too.

How to change the font size of a text block

Let's start with the fastest method.

When you edit text in a WordPress post, you can choose to make a block of text a different font size than other blocks on the page.

This helps highlight specific parts of the page.

You should use this method with caution: too much can make your site look cluttered and unprofessional. If you do this multiple times, make sure to use the same font size for all larger or smaller sections of text.

Start by finding the block of text you want to change the font size of.

在 WordPress 中调整字体大小的指南

In the Blocking pane on the right side of the screen, open the Text Settings tab.

在 WordPress 中调整字体大小的指南

Here you can choose to make the text larger or smaller, or specify an exact font size for it. I've increased the font size to medium:

在 WordPress 中调整字体大小的指南

You can enhance it further and make it larger, but be careful not to make your site look cluttered.

Alternatively, choose a specific font size and make sure to use it for all larger or smaller font blocks on your website.

Finally, click Update to update your post, or Publish to publish it. This will save your changes.

How to change font size using CSS classes

If you want to ensure that all larger blocks of text are the same size, and don't want to remember which size you used, you can use a CSS class to assign a consistent font size class to all elements.

Find your text block again and open the Advanced tab in the Blocks pane.

在 WordPress 中调整字体大小的指南

In the Other CSS Classes field, enter the CSS class. I will use text-large:

在 WordPress 中调整字体大小的指南

Now click Update or Publish to save your post.

You now have two options for editing the size of a block using this class:

  • Add styles in the customizer.
  • Add the style to the theme's stylesheet.

Styling a class in the customizer is the easiest way and won't cause you any problems when updating your theme.

Go to Appearance > Customize in the WordPress admin center and click Additional CSS.

在 WordPress 中调整字体大小的指南

In the Other CSS pane, enter the following to make the text larger: p>

.text-large {
 font-size: 1.2em;
}
Copy after login

Using em instead of a specific font size will make the text 1.2 times the size of a normal paragraph.

在 WordPress 中调整字体大小的指南

Click the Publish button to save your changes.

Now go to the post in your live site and you will see that the block with the class text-large is larger than the text around it:

在 WordPress 中调整字体大小的指南

If you want to increase the size further, just edit the CSS in the customizer. Now, whenever you want a block to grow, you just assign it that class and the font size will change for you.

Change font size in theme stylesheet

With the two methods I showed you don’t need to edit the files in your theme or have a deep understanding of CSS. They provide you with a quick way to change WordPress font size.

However, if you want to edit the size of existing elements in your site (such as all paragraphs or lists), or if you want to add CSS in the stylesheet instead of the customizer, you will need to edit your theme's stylesheet.

You can find more information about editing stylesheets in our guide to adding custom CSS to your WordPress site. If you want to go deeper, this is a great place to start.

in conclusion

Changing the font size of text in your WordPress site may take a few minutes. You can edit the block's font size directly, or you can assign it a class and write CSS for your class.

No matter which method you use, use it sparingly for maximum effect and to ensure you don't end up with a website that looks cluttered and unprofessional.

Make your website beautiful with a professional WordPress theme

Are you revamping your WordPress website? Our collection of professionally designed WordPress themes can give your website a new look and feel in minutes.

在 WordPress 中调整字体大小的指南

Here are some of the best-selling and emerging WordPress themes launched in 2020 by ThemeForest. p>

The above is the detailed content of Guide to adjusting font size in WordPress. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template