This WordPress tutorial is aimed at new developers who may be just getting started, but aren’t afraid to get “under the hood” and edit some actual code in order to use custom stylesheets or Google fonts the right way with WordPress.
Start by opening the functions.php file in your theme with your favorite text editor. If you don’t have a favorite, you can use Notepad, if you’re on a PC, or my preferred free text editor, Geany.
At the end of the file (or somewhere else, if you’re confident it won’t mess things up), right above the ?> on the last line, enter the following (skip one or the other wp_enqueue_style lines, if necessary for your needs):
// Add custom Google fonts & my extra style sheets
function my_custom_styles() {
wp_enqueue_style('custom-google-fonts','https://fonts.googleapis.com/css?family=Playball&display=swap', false);
wp_enqueue_style('search-styles',get_template_directory_uri() . '/css/mystyles.css', false);
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
You should change the text where it appears red (for those who can’t see the color, it’s the Google URL and the partial CSS path on the following line). The new values should reflect your personal information–the URL to the Google fonts you’ve chosen, and the path to your custom CSS file. In the example above, I’ve chosen to create a whole new directory for my custom CSS, because I expect to have several files to make CSS management easier. Once you’ve done so, upload your revised file and your new CSS file, if applicable.
Important Tips:
- If you plan to enqueue several Google fonts, put them all in the same line with the custom Google path provided by Google.
- If you plan to have more than one custom stylesheet, be sure to remember that stylesheets cascade–what you enter in one stylesheet may override what you entered in previous sheets, so enter them in the order in which you want them to appear!
Red-Faced Tip:
- Make sure to actually upload your custom CSS directory, if you use one. I once spent 10 minutes after uploading my functions.php file trying to figure out why my new styles weren’t working, only to finally realize I hadn’t uploaded the CSS directory!