If you've been doing any design work on your blog, chances are you've been making your changes from a layout template like Minima. And if you're just taking your first steps with customising your blog, I'm sure most people will agree that these are sooooo much easier for basic CSS/HTML customisation than the new blogs. One of the downsides, however, is that you could be missing out on some of the groovy new fonts.
Well now you don't have to!
If you'd like a particular font that you've seen on a new blog, then I'm going to show you an easy way to install it in your blog.
To begin, head over to the Google Web Fonts Directory. Once you're there, simply look for a font that suits the style you're after.
When you find a font you like, click on 'Quick-use' option on the right and it will take you to page that looks like this:
Scroll down the page to Step 3 and you'll see this:
Copy the code section from Step 3 and go back to your blog.
Open the Design tab, then go to 'Edit HTML'. (Tip - backup your blog before editing the HTML pages).
To install the font, simply copy the code for the font directly after the first <head> tag.
After you've done this, you'll need to make two small changes.
Firstly, you will need to find the & symbol - and add 'amp;' directly following it (without the quotes). Secondly, you'll need to add a '/' symbol (without the quotes) just before the closing of the font code.
The head tag is circled in the image below, and the changes you'll need to make are also circled in the image below.
And that's it - your new font is installed and ready to use! You can use it in your header, post titles or sidebar - whererever you like!
I recommend making a change to one type of title initially, then clicking on Preview to check everything is installed correctly. If it's all working, then save the changes you've made before making further changes to titles on the blog.
Changing title fonts:
To make changes to titles, you'll need to replace the current font with the name of the font you've installed. If you're not sure what the correct name of the font is, see step 4 on the Google Fonts site for the correct details.
To find the sections you want to make changes to, type Ctrl F to search the blog code.
If you want to change the post titles, search for 'post-title' and to find the section that looks like this:
To change the sidebar titles, search for 'sidebar' and find the section that looks similar to this:
**In both these instances, you'll see that you can also change the font size and colour in the same section of code, as well as the font family.
Once you've finished making any changes, click Preview to see how it all looks. When you're happy with your new font, just save and you're done!
Melissa x
