Dear Reader, if you like SUYB's content, feel free to comment on our blog posts.
Back in January this year (2011) Blogger added 77 very cool fonts to the Blogger template designer.The fonts they added were from the Google Web Fonts directory and included some awesome bold fonts, handwriting fonts and fun fonts that could give your blog a unique look.If you use a template from the template designer you simply go to the template designer editor then choose and save any font.While this was great news for Bloggers using templates from the template designer unfortunately Bloggers using Custom Blogger templates could not use the fonts so easily.So if you have a custom Blogger Template (A Template You Downloaded Online From A Blogger Template Site) in this post i will show you how you can manually add any of the fonts to your blog.
This is a video tutorial so you can follow the steps in the video.A summery with the extra information you need is below the video.
Custom Fonts For Custom Templates - Video Tutorial
Step 1. Go to Google Web Fonts
Step 2. Choose the font you want to use from the list and click on it.
Step 3. On the next page Click the use this font link.
Step 4. In your Blogger Dashboard click > Design > Edit Html.
Step 5. From Google Web Fonts Copy the first snippet of code and paste it directly below <head> in your templates html.
Note 1 - You must add a forward slash (/) to the end of the code as shown in the video.
Note 2, XML error message: The reference to entity "v1" must end with the ';' delimiter. - If there is more than one version of the font you want to use it will be defined by the tag &v1 or &v2 etc..This will not be accepted in your template so we simply change the & symbol in front of v1 to the following :
Here you can see it using the Artifika font :
Step 6. From Google Web Fonts Copy and paste the second snippet of code directly above ]]></b:skin> in your template.
Step 7. You now need to change H1 in the code to set were the font will be used on your blog watch the video for the options.
And that's it you can now choose from lots of cool fonts to use on your blogs titles no matter what template your using.
In the next post i will show you how to use custom fonts on the titles within your posts and also how to change the fonts use for the main text of your posts.
You can choose from 100's of custom templates on our template site Best Blogger Templates.
Drop Your Comments And Questions Below.
Join over 5000 Subscribers! Please sign up to receive Updates.
SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.
If You Enjoyed This Post Please Take 5 Seconds To Share It.
Great post just what i was looking for and the video was awesome made it so easy.
ReplyDeletePls, maybe this is not thie right place to ask this question, but u've got to help me.
ReplyDeleteThere is a huge amount of blank space between the top of my post title and the post content. How do I get rid of it?
@ Okechukwu - Do you write your posts on a programme like live writer then paste them into the Blogger post editor ?
ReplyDeleteO yeah, I use Ms-word to type the post and then copy-paste it in the text box.
ReplyDeleteYes, I used Ms-word to tpe and then copy and paste. I think i have figured it out. While trying to edit the post, I didnt wait for for it to save fully. I recopied the post, clicked on new post and pasted it there and allowed it to save it fully before editing it. Thanks anyway, you must be a genius. Sometimes it amazes me how you were able to know all that you know. Thumb-up man.
ReplyDeleteThank you for the helpful post!
ReplyDeleteThanks
ReplyDeleteThanks a lot man. Your Video TUT just rocks. Awesome Post, keep it up.
ReplyDeleteHi, I followed step-by-step guide and tried till h5 but none of my Post title, sidebar font or Blog description changed. Please help me. My blog URL, 'tricksjunction.com.'
ReplyDelete@ Saif - Follow the steps in the video including trying different H tags and it has to work, i can't really explain it any better.
ReplyDeleteI am using a custom template and would like to change up the fonts, say for only one word, or one sentence, how is that done. The normal 7 on the font list in blogger are so boring.
ReplyDeletei followed exactly the steps you mentioned, but i got this error message instead:
ReplyDeleteYour template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The reference to entity "v1" must end with the ';' delimiter.
error 500
could please tell me where did i do wrongly?
@ Fj - Did you enter V1 instead of h1 ? there is no reason for v1 to be in the code.Try again from the start and you should get it to work..
ReplyDeleteHi nPaul I get the same error as FJ? and I tried changing the v1 to h1 and it still gives an error
ReplyDelete@ Nunza and FJ - Were is the v1 comming from ? Did you close the link as shown in the video and step 5 above ?
ReplyDeleteI get the same error.
ReplyDeleteThe V1 is straight from the google site:
link href='http:// fonts.googleapis.com/css?family=Tangerine&v1' rel='stylesheet' type='text/css>
hope you have an idea how to fix this.. it's driving me insane lol
@ All - I'm so sorry and feel a little dumb :) I wrote a similar google fonts tutorial on a differant blog and was just checking it out when i remembered what was causing the problem for you guys.
ReplyDeleteWhen you use a font that has more than one version, the version you use is defined by the tag - &v1 or &v2 etc..
This is not accepted in your template but you will be glad to know the easieset of changes will fix it.I have updated the post with the instructions to fix it in step 5.
Let me know if you have any more problems.
This was a great tut, but it didnt work on my blog. :( There are no error messages, but it didnt change the fonts at all either.
ReplyDeletegreat info and tutorials
ReplyDeletethanks for sharing
nothing is happening. I have entered 3 fonts and put one below the other. Don't know if this is right. Also it only came up as:
ReplyDeletefont-family: 'Rock Salt', cursive;
There is no H1 or font weight info attached so I copied from your example but nothing is changing. Ideas?