A while back I wrote a post on How install Google Fonts on your #BloggerBlog?! Today, I am going to explain How to install Google Fonts on your #WordpressBlog. Google Web Fonts are really cool fonts optimized for the web. The great thing about them is that they are FREE and they are our go to resource here at Busy Momi Bee Blog Designs. So, let’s talk about how you go about doing this:
Step 1: Click on Google Web Fonts and search the 500+ Fonts to find the one you would like to use. For this tutorial we will use “Sacramento”.
Step 2: Once you have the font you would like to use click on the “Quick Use” tab.
Step 3: Scroll down to step 3 and click the “@import” Option then copy the code.
Step 4: Before you do anything you are going to want to back-up/save your current theme.
Log into your WordPress Dashboard and highlight the “Appearance” Tab. A few options should come up, and you will need to click on the “Editor” option. This should bring up your themes style sheet, where all the design magic happens:)
Step 5: Place the following “Import Fonts” tag along with the import code, in the top of your css code, right below the first section of your theme information:
/* Import Fonts
This is what it looks like in the twenty eleven theme:
Step 6: Click “Update”. We are almost done! Now that you have the code installed you can move on to the last and final steps.
Step 7: Go back to the Google Webfonts site and copy the “font family” code in step 4 (‘Sacramento’, cursive;)
Step 8: Now place that ‘Sacramento’, cursive; anywhere you see “font family” in your HTML/CSS code and there you go. The code should look like this when it is all put together: Font Family: ‘Sacramento’, cursive;
Here is a tip: To find “font family” in your HTML/CSS code just hit control F on your keyboard and a search bar should pop up in the upper right hand or bottom left corner of the screen. Type in “font ” in the search bar and they should show up.
Another tip: If it does not show and you don’t see the changes, hit F5 on your keyboard to clear your cache.
Still have questions?? Let us know, we would love to help.
Next tutorial: Hosting Provider Resources!