Getting Different Fonts for Your Posts and Pages


So, recently someone asked about getting fonts for blogger, other that the standard Arial, Courier, Georgia, Helvetica, Times, Trebuchet, and Verdana. This is actually do-able, and not nearly so much of a pain as you might think. Though still kind of annoying. So, you don't really need any experience with HTML/CSS stuff for this, but it is helpful for understanding what is going on. If you don't have any experience, than just call it MAGIC.

So, as a basic bit of knowledge, when you choose a font from a drop down menu list, the HTML automatically changes to something like this...

span style="font-family: Times, Times New Roman, serif;"

So you can see that it is telling the following text to be Times New Roman. What you will be doing, once you have added the fonts to the blogger template, is going into the HTML, and changing that font code. It's very simple, and I shall show you how to do it in a moment. First, lets see how to add your fonts to your Blogger Template. 
What you will need, is a font with a HTML code link, you may find other sources for these, but the one I recommend, and the on I will be referring to, is the GoogleFontsDirectory
You can add one font at a time, but I just find a bunch of fonts at once and add them to my google fonts collection. Once you have the fonts you want added to your collection (no sign up or anything is required for this) you can get the code. 
While you are in GoogleFonts, look at the bottom right corner of the browser window, you should see three little tabs that say Choose, Review, Use. Click on USE.
You should see all of your fonts lined up. Scroll down until you get to a little box with code in it. It should look something like this.Copy the code.


This code has all of the fonts that you added, now you need to go to your BloggerDashboard>>Template>>Edit HTML
Click IN the HTML and use the Keyboard shortcut ctrl+f to bring up a search box, find 
<head>
Paste the code DIRECTLY beneath <head>.

So, now your code, which looks something like this, minus the ellipses at the end.
link href='http://fonts.googleapis.com/css?family=Crafty+Girls|Yellowtail|Calligraffitti|Indie+Flower|Pacifico|Dancing+Script|Architects+Daughter|Amatic+SC|Courgette|Handlee|Pinyon+Script|Cookie' rel='stylesheet' type='text/css'>...
You will notice that there isn't any closure at the end of the code, you will need to add this to avoid problems. So, at the end of the code where it says
/css'>

You will need to change it to
/css'/>

So that the code will now look like this, again, minus the ellipses at the end.
link href='http://fonts.googleapis.com/css?family=Crafty+Girls|Yellowtail|Calligraffitti|Indie+Flower|Pacifico|Dancing+Script|Architects+Daughter|Amatic+SC|Courgette|Handlee|Pinyon+Script|Cookie' rel='stylesheet' type='text/css'/>...

OK. Now the fonts are in your BloggerTemplate. We can move on to actually using the fonts in post or pages.
Now, you can memorize the names for all the fonts (they aren't always as simple as all that) or, you can go back to that page where you found your fonts in the first place, and scroll beyond the first code, to another box, with shorter lines of code.
It will look something like this.
Each line is a separate code for a separate font. Copy the line that has the font you want (again, on the same page as this code, at the top, are examples of all the fonts in your collection, so you can look at them there). 
Now, in your post or page, go ahead and type up your content in one of the standard fonts (I use Times) that way you can see clearly what to change to get your own font. The top of my list is Crafty Girls, so I will use that for this next paragraph. 

This is an example sentence using the Crafty Girls font. 


So, once you have the text whose font you want to change, go into the HTML version of your post. (At the top left corner of your post editor it says Compse and HTML, click HTML).

Find the text you want. 

On the Google fonts page, copy the single line of code for the font you want, in this case, Crafty Girls.


font-family: 'Crafty Girls', cursive;

Copy your code, and use it to replace the code highlighted in red. 
span style="font-family: Times, Times New Roman, serif;">This is an example of the Times New Roman Font
And now, the font will be Crafty Girls


span style="font-family: 'Crafty Girls', cursive;">This is an example of the Times New Roman Font. But it has been changed to the Crafty Girls Font.

This is an example of the Times New Roman Font. But it has been changed to the Crafty Girls Font.

So, I hope that this Tutorial was actually helpful. 
And if it is, than I am glad to have helped.
And if it isn't, then I didn't do any harm.
And please give me feedback if you would be so kind.
Or not.
Whichever you prefer.
Bye now. Oh by the way, this particular font, Courgette, is a particular favorite of mine. 
At any time, you can get more fonts and add them in just above head, just like the first time. If you have any questions about this tutorial or fonts or Google fonts...or whatever, comment below, or you can use the contact form here




 photo theauthor_zps8356b86b.png

FACEBOOK   GOOGLEPLUS   PINTEREST   TWITTER

No comments:

Post a Comment

I should be most pleased if you would leave a comment. I do so love reading them and hearing what you think.
(all of it, I want to know everything you think about....wait no, that's creepy)