DIY #2: Implement your own font on your blog

In addition to yesterdays topic on how to make your own font, I've now made a guide for you on how to use your new font on your blog. It's of course also possible to use other custom fonts on your blog. It's the same approach with all fonts that aren't pre installed or Google fonts.

Find free fonts here

How to make your own font

If you want to implement your own font on your blog or homepage it's really easy and fast and I'll show you how to do it. I don't know if it's the same method in WordPress but I'm sure you'll be able to find a specific guide for that purpose. We're going to do some simple coding but I promise you it's level 1 HTML and CSS coding.
. 

1. Upload your new font (the TFF file) on a hosting site. I'm using Google Drive. It's not possible to use image hosting sites like Photobuck and Picassa it has to be a hosting site like Google Drive and Dropbox. 


2. Make sure your folder in which you're uploading your file is public. Otherwise it's not possible for Blogger (or WordPress) to access the file.  


3. Login to Blogger. Go to Template >> Edit HTML


4. You'll now have to copy and paste a link with your font into the template's stylesheet. The link goes right before ]]></b:skin> Use [Ctrl] + F to search for the phrase. 


5. The link look as follow: @font-face { font-family: THE NAME OF YOUR FONT; src: url("URL OF YOUR FONT");}


6. You'll then have to replace the lines in red with the matching references. And the name of your font is the name without the file format at the end (TFF). 


7. When your using Google Drive your URL looks like this: http://www.googledrive.com/host/FOLDER NAME/FILE NAME 


8. Replace the folder name with the ID of the folder containing the font. My folder is named "Offentligt indhold" and the ID of the folder is 0B7R7E6lf20iJRkt6QkZCckdjSH. My file is named "MyScriptFont.tff" - My URL looks like this  http://www.googledrive.com/host/0B7R7E6lf20iJRkt6QkZCckdjSHM/MyScriptFont.ttf


9. My entire link looks like this: @font-face { font-family: MyScriptFont; src: url("http://www.googledrive.com/host/0B7R7E6lf20iJRkt6QkZCckdjSHM/MyScriptFont.ttf"); }


10. Make sure the content before your link is closed and by close I mean make sure it has a } at the end. Just like the link you've just made.  


11. Choose "Save template" And you're now ready to use your new font.

And how to use your new font? Well it depends on the intention. If you want to use it in a post just copy and paste the HTML code below into your post. Remember to select "HTML" instead of "Compose" before pasting in the code. Afterwards you can select "Compose" again.

<span style="font-family: NAME OF YOUR FONT; font-size: SIZE OF YOUR FONT;color:CHOOSE A COLOR">YOUR TEXT HERE</span> 

Replace the reds with your own values. My code looks like this:

<span style="font-family: MyScriptFont; font-size: 50px; color: pink; ">SO EASY GIVE IT A TRY</span> 

If you just want to use the standard color on your font you can just delete the color part from the code. The same goes for "font-size". You can use color codes if you want to. The color code for red is #FF0000 and you can find some more color codes here.

SO EASY GIVE IT A TRY

If you want to use your font on other parts of your blog you'll have to go back to your stylesheet again. The general code for grabbing your font is this: font-family: 'THE NAME OF YOUR FONT'; If you want to change the font of the headline of your posts you'll have to overwrite the current rule and it looks likes this .post-title {font-family: 'THE NAME OF YOUR FONT'!important; } It goes at the bottom of your stylesheet, just after the link to your font which we made earlier. I've added "!important" to the code because Blogger already has a rule on how to change the font of the headline of your posts. And in order to overrule it we have to use the "!important" tag, but it's rarely necessary. Afterward select "Preview template" and if you're satisfied select "Save template".

Et voilá - You now have your own font on your blog. Easy peasy!

If you have any questions feel free to ask. Also if you need me to elaborate some parts of the guide. Otherwise I hope you found it useful. I think it's nice that you're able to use other fonts than the ones Blogger has chosen for you. My favorite font at the moment is "News Cicle".