Change WordPress Font-Size Using Theme Options or CSS | WP Learning Lab - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress WPLearningLab Video: Change WordPress Font-Size Using Theme Options or CSS | WP Learning Lab.
Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL
Download your exclusive 10-Point WP Hardening Checklist: http://bit.ly/10point-wordpress-hardening-checklist

Change WordPress Font-Size Using Theme Options or CSS | WP Learning Lab

Changing WordPress Font-size is done in the theme options panel or with CSS. Once you know where to make the changes in your theme it is easy to do.

As with a lot of things in Wordpress, where you do things depends on the theme you're using and the plugins you're running.

First, always check to see if your theme has theme options. If it does then you should be able to find a typography tab to edit font sizes. Sometimes font sizes will be found in the general settings of the theme options.

The theme options will be found either under the Appearance menu in the left hand side admin menu or there will be special menu item that the them itself added.

If your theme doesn't have theme options, then you're next stop should be the customizer.

Some themes have a lot of WordPress Customizer support. Go to Appearance then Customizer to see if you can edit font sizes there.

If both of those are a no-go then you're left with going to directly to the stylesheet to change font sizes.

This is method is great if you have some CSS knowledge.

To find your stylesheet go to Appearance then Editor. The stylesheet will be the first thing to appear in the editor. If, for some reason, it's not there, then find the style.css file in the list of theme files on the right and click it to open it in the editor.

NOTE: You should be edit stylesheet of a child theme only. If you edit the parent theme stylesheet directly then your edits could be overwritten when you update the them. Here's a tutorial on how to create a child theme if you need it: https://www.youtube.com/watch?v=Z8n1h-85SMQ

Now that you have the CSS stylesheet open in the editor you will need to find the font styles.

The easiest way to do this is go to your main site and find the fonts that you want to edit. If you're using Google Chrome or Firefox right click on the text and choose the "inspector" or "inspect" from the context menu.

If you're not using Google Chrome or Firefox then start using them.

In the inspector that opens at the bottom of the page you should see the text highlighted in the main area and the class of the element on the right.

You can type styles right into the element on the right hand side to quickly test to see how big you want the font to be.

This doesn't save it permanently. What you see is only in your browser and as soon as you refresh the page you'll lose it.

So, find the class for the text, find the right size and move that CSS rule in to the stylesheet for the child theme.

Sometimes you'll have to fight with the existing CSS to make your font changes take effect. That's where a command link !important comes in very handy.

If you type .h2 {font-size:10px !important;}. Having !important forces that style to take precedent over all others.

It's a lazy way to code CSS, but unless you have time to find the conflicting styles, it's a fast and easy trick.

Subscribe to this awesome channel here: http://www.youtube.com/subscription_center?add_user=wplearninglab

Published: Saturday, August 10, 2019 8:43 AM
Category: Wordpress WPLearningLab

94 Views

Related Videos

How to Change the Font Size in WordPress (3 Different Options)

by Best Webhosting Added 4 years ago 100 Views / 0 Likes

Are you wanting to change the font size on your WordPress posts and pages? Not all themes have a simple built-in method for changing the size of text but we have taught many people the way to change this. In this video, we will show you how to change the font size in WordPress. The simplest step would be to use the header tags which are styled by the theme you are using. By highlighting specific text, clicking the dropdown, and selecting the style you
Click Button to Change Font-size using Javascript | Increase Decrease Font Size on Website

by Best Webhosting Added 3 years ago 30 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve
Popular
How Do I Change The Font Size in WordPress?

by Best Webhosting Added 4 years ago 131 Views / 0 Likes

You know that feeling when you find the PERFECT theme, but the fonts are all too small? We'll show you how to change those font sizes to make them readable for everyone! - Guide to choosing the best WordPress hosting: https://winningwp.com/best-wordpress-hosting/ - Beginner WordPress guides: https://winningwp.com/guides/ - Exclusive WordPress deals: https://winningwp.com/wordpress-deals-and-coupons/ - Interested in learning even more about WordPress.
How to Easily Change the Font Size in WordPress

by Best Webhosting Added 4 years ago 68 Views / 0 Likes

Are you wanting to change the font size in your WordPress posts and pages? You may not like how your theme has styled the text or want to customize a line or paragraph for your uses. In this video, we will show you how to easily change the font size in WordPress! This video is sponsored by MonsterInsights, a powerful plugin to help you use your analytics information to the fullest, take a look at MonsterInsights here: =================================
Change Font Size Wordpress Tutorial

by Best Webhosting Added 4 years ago 97 Views / 0 Likes

Need free website help? http://www.conutant.com Tutorial on how to change the wordpress default font size.
How To Change Font Size In WordPress (2 ways) - Default, Post Titles, Menus, Widgets, Header, Footer

by Best Webhosting Added 3 years ago 45 Views / 0 Likes

Learning how to change font size in WordPress is an important skill, especially if you're working with clients. Another common task in WordPress is getting blog posts to display on a specific page. I have a tutorial for exactly that here: https://youtu.be/0t5azK0MH7Y. Back to changing font size in WordPress, depending on how a site is built, there are a number of places where you can change the font size. You'll learn the two most common in this tutor
WordPress Screen Options - Change What's Displayed On WordPress Admin Pages | WP Learning Lab

by Best Webhosting Added 4 years ago 98 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Download our exclusive 10-Point WP Hardening Checklist: http://bit.ly/10point-wordpress-hardening-checklist WordPress Screen Options - Change What's Displayed On WordPress Admin Pages | WP Learning Lab In this tutorial I'm going to walk you through the WordPress screen options. These options are used to show or hide certain parts of the admin page. Screen options are only f
Scale Text Elements in Figma - Change Font Size Inside a Text Box | Figma Tutorial

by Best Webhosting Added 3 years ago 71 Views / 0 Likes

How to scale text elements in Figma? How to change Font Size inside a Text Box? Many of those who are just starting out in Figma and coming from a Photoshop, Illustrator or Sketch background, often struggle to figure out ho to change font size by dragging a corner of a bounding box, like we do in other apps. But it's not Figma's flow, there is an easy fix to this issue - Figma has an additional tool allowing you to scale your groups, components, strok
Popular
Responsive Font Size | CSS vw Unit

by Best Webhosting Added 4 years ago 103 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Skylike - Dawn Link: https://youtu.be/Jg9nDEtqWV0
Popular
How to Change Thumbnail Size in WordPress

by Best Webhosting Added 4 years ago 105 Views / 0 Likes

In today’s video, we cover how to change thumbnail size in WordPress. Blog post: https://www.elegantthemes.com/blog/tips-tricks/how-to-change-thumbnail-size-in-wordpress-and-why-you-want-to/ Like us on Facebook: https://www.facebook.com/elegantthemes/
WordPress. How To Change Logo Wrapper Size

by Best Webhosting Added 4 years ago 97 Views / 0 Likes

Our Support team is ready to present you a new tutorial that shows how to change logo wrapper size in WordPress. Want to Build WordPress Site in 5 Hours? Subscribe to this course: http://www.templatemonster.com/website-5-days.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts218 Choose your WordPress template now: http://www.templatemonster.com/wordpress-themes.php?utm_source=youtube&utm_medium=link&utm_campaign=wptuts218
How to Change the Gravatar Image Size in WordPress

by Best Webhosting Added 4 years ago 99 Views / 0 Likes

Some site owners may see the size of user's gravatars and decide they would like to either increase or decrease it's size. We will show you one method to do that in this video. Text version of this tutorial: http://www.wpbeginner.com/wp-themes/how-to-change-the-default-gravatar-image-size-in-wordpress/ If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos. Check us out on Facebook: https://www.face