How to change font family, color, style and font size in wordpress

How to change font family, font color, font style and font size in wordpressChanging font family and adding a detail to your Font style, font color and font size will totally give a different look to your site. To make you site more elegant you should focus on changing the default font family, color, style and size. In all premium wordpress themes you can look for a theme option panel. In there you will have the options to change font family, color, style and size for your posts, widgets and footer texts separately. But, how about free wordpress themes? Here we will discuss on how to change font family, font color, font style and font size in wordpress.

No matter what you get, but anyhow the theme does not have the option to change font family for particular text or paragraph in specific post.  Recently one of our visitors asked us about changing font family for specific text in a particular post. You can change font style, font size, font color and font weight from your post visual editor, but not font family. Here we will also see how to change font family for specific text or paragraph in a post.

Related: How to link to specific part of a page

Understanding CSS font properties

  • font-family – This specifies font family for the text (e.g. font-family: times, serif 😉
  • font-size – This specifies font size for the text (H1, H2, paragraph…)
  • font-weight – This specifies weight for the font such as normal and bold
  • font-variant – Specifies the font such as normal or full caps
  • font-style – This one specifies the text style that is normal, italic and oblique.

Inspecting element in your browser

In order to change the font family, font style, font color and font size you have to first find out the particular element in your theme style sheet. Below are two cases to easily find out the specific element in your theme style sheet.

Case: 1

For example let’s say you want to change font family, size, variant and color for your widget title. Just right click the widget title and click inspect element like you see in the image below.

How to change font family, font style, font color and font size in wordpress

You can see the style sheet location and the element class of the particular CSS element. In our case the element class is (.widgettitle {). Before you make changes to your style sheet, just edit the CSS codes in your browser Dev tools and see how your widget title changes.

Now open your style sheet using FTP, now press ctrl+F and search for that element class. After spotting the element you can change the font family, font color, font variant and font size. If you are a beginner then it’s good to gain some basic CSS knowledge.

Related: How to find out the wordpress theme and plugin used in a site

Case: 2

For example let’s say you want to change the font color for Footer text. The process is same, just right click the footer text and inspect element. Now you can see the element class in Dev tools. Copy the element class and find it in your style sheet and change the color code.

How to change font family, font style, font color and font size in wordpress

Note: You can make changes to your main style sheet or you can create a custom style sheet and call the element.

Related: How to change default text selection color in wordpress

Changing font color and font size in wordpress post / page

To make a post user-friendly you should practice on adding H2, H3 tags. Also you should differentiate important text with colors, style and weight. So your users can better understand and stay focused on the post. One more thing you should note is that adding H tags in post has some SEO benefits, so use it wisely.

If you want to change the font color, font size, font weight and font style for your posts and pages then there is an option in your visual editor. See the image below.

How to change font family, font style, font color and font size in wordpress

Changing font family for H tags, p tags, li tags in wordpress

Want to change the font family, but don’t wish to edit the style sheet?

Just install and activate WP Google fonts plugin and you can easily add Google fonts to your wordpress theme. Just select any font that you like and assign that font to any element such as h1, h2, h3, h4, h5, h6, p tags and li tags. You can totally choose six different fonts for your wordpress site.

Changing font style, font color, font family and font size in wordpress

How to change font family for particular text in wordpress

At some occasion you will need this, where you think of changing the font family for particular text or paragraph in a post. If so then just install and activate Font wordpress plugin. After activation this plugin adds a feature in your visual editor. Just select the particular text and easily change the font size, color and font family.

How to change font style, font family, font color and font size in wordpress

Hope this post helped you on how to change font family, font style, font color and font size in wordpress. Share and leave your comments below. To get more tips, subscribe to our RSS feeds.