You’ll notice that as you move your mouse over different elements on the left hand section they will highlight in the main window above. On the left is the HTML, and on the right the CSS that is applied to the element you currently have selected. Right-click on the element on the page that you want to change and select Inspect Element with Firebug.įor this first example we’re going to increase the size of the font in the navigation menu in the Twenty Ten WordPress theme.Ī window is going to pop-up from the bottom of your browser that looks like this: We’re going to refresh everytime we click the Save button to make sure our changes are working. Keep the PC Custom CSS window open and launch the page you want to change in a new tab. Use Firebug to find the element you want to change. This is where we’re going to paste in our styling changes, whether it’s increasing the size of certain fonts or changing the layout and colors.ģ. Visit Plugins > Add New and enter “PC Custom CSS” into the search bar.Īfter activating the plugin, navigate to Appearance > Custom CSS.
Install Firebug for either Firefox or Google Chrome.įor this guide we’re going to be using Firefox.
How to change fonts in WordPress using Firebugġ. It allows you to look under the hood of any website in order to make changes, or just to discover how the site works. What is Firebug?įirebug is an invaluable tool for any web developer. NOTE: If you want this kind of control over your site’s look and feel in an easy-to-use interface, you might want to consider a premium theme.
Using this tool and a custom CSS plugin you’ll learn how to change the styling of the typography on your WordPress site.ĬSS, also known as a Cascading Style Sheet, controls the look and feel of a website and can also determine layout as well. This a beginners guide on how to change fonts in WordPress using the browser addon, Firebug.