Post by account_disabled on Dec 20, 2023 5:21:18 GMT
You can also load fonts without assigning them to any elements, which means you can add them to any custom CSS in the Customizer. Loading fonts : If there are font weights you don't need (e.g. bold, italic, etc.), you can deselect them here so they don't slow down your site unnecessarily. Debug : Use this option to force any font to appear if it isn't working as it should. Invest some time working with these settings and testing them in the Customizer to make sure they work the way you want. Then, when you're happy with your settings, click the Publish button . Don't exit the Customizer without clicking Publish , or you will lose your changes. Changing Font Colors The free version of the plugin does not allow you to change font colors. To do this, you will have to purchase the premium version or use the Additional CSS option in the Customizer.
Return to the Customizer home screen and click the Additional CSS tab . You will see a blank text area Country Email List where you can add your CSS . To find the element you need to style, select it and use the code inspector in your browser to find out which color style is already present. Below I'm using Google Chrome and inspecting an element h1. Inspect the code in Chrome Inspect the code in Chrome In my WordPress theme , the color is inherited from that of the body. I want to add something more specific. In your CSS text area, enter the CSS for your element and the color you want to use. Mine looks like this: h1 { color: #f542f5; } So I get a bright pink H1: Changing the header color Changing the header color You can repeat the operation with all the text elements to which you want to add color, and also with any custom fonts that have not been included in the options on the other screens. If you want to know which CSS to use for fonts, read the paragraph in this post dedicated to modifying your fonts using CSS.
How to Manually Add Web Fonts If you don't want to add an extra plugin to your site and you have access to your theme code, you can install and use web fonts by adding code to your functions file and style sheet . If your site uses a custom theme that you can modify, then you can edit the features file and stylesheet from your theme. But if you use a third-party theme that you purchased or downloaded from the WordPress theme directory , then you will need to create a child theme . You will then need two files: functions.php and style.css . Let's see how to manually add web fonts to your theme. For this example I will be working with Google Fonts, as this is the most commonly used and is free. Choose a Font and Copy the Link Start by choosing your font from Google Fonts. Add it to your library by clicking the plus icon next to it. Click on the tab at the bottom of your library screen and you'll find some code to add to your site.
Return to the Customizer home screen and click the Additional CSS tab . You will see a blank text area Country Email List where you can add your CSS . To find the element you need to style, select it and use the code inspector in your browser to find out which color style is already present. Below I'm using Google Chrome and inspecting an element h1. Inspect the code in Chrome Inspect the code in Chrome In my WordPress theme , the color is inherited from that of the body. I want to add something more specific. In your CSS text area, enter the CSS for your element and the color you want to use. Mine looks like this: h1 { color: #f542f5; } So I get a bright pink H1: Changing the header color Changing the header color You can repeat the operation with all the text elements to which you want to add color, and also with any custom fonts that have not been included in the options on the other screens. If you want to know which CSS to use for fonts, read the paragraph in this post dedicated to modifying your fonts using CSS.
How to Manually Add Web Fonts If you don't want to add an extra plugin to your site and you have access to your theme code, you can install and use web fonts by adding code to your functions file and style sheet . If your site uses a custom theme that you can modify, then you can edit the features file and stylesheet from your theme. But if you use a third-party theme that you purchased or downloaded from the WordPress theme directory , then you will need to create a child theme . You will then need two files: functions.php and style.css . Let's see how to manually add web fonts to your theme. For this example I will be working with Google Fonts, as this is the most commonly used and is free. Choose a Font and Copy the Link Start by choosing your font from Google Fonts. Add it to your library by clicking the plus icon next to it. Click on the tab at the bottom of your library screen and you'll find some code to add to your site.