Menu

How To Use a Custom Font for All of Your Blogger/Blogspot Posts

•April 27, 2009

This quick and easy tutorial will show you How to Use a Custom Font in Your Blog Posts! Check it out if you want to customize the text on your blog!

How to Change Your Blog Post Fonts

How To Use a Custom Font for All Your Blog Posts

Okok. So you want to change your *entire* posts to a funky font. Well, it can be done… Sort of.. I can’t figure out an easy way to change the font of your existing posts, but it can be done for any new posts you write.

click here to see a live demo of what this tutorial does

First- the boring stuff. Disclaimers. Warnings. Etc.

  1. This tutorial is a continuation of my How To Use a Cute Font for Your Blogger Post Titles, so you’ll have to do all the stuff in that tutorial before this one will work. :)
  2. I don’t really recommend writing every single post, all the time, the entire thing, in a custom font.
  3. sIFR is best used for changing titles and headers, not entire blocks of text.
  4. It will make your page load slower.
  5. It will make your page be all jumpy and crazy-looking as it’s loading.
  6. It won’t look perfect– you can only use one font color/size for everything you write and there may be some extra spacing/padding at the bottom, but there’s no way that I know of to get rid of it (see what I mean about the padding on the demo).
  7. I kinda like plain, easy to read fonts for the main content of a blog anyway.
  8. If you created an account with Geocities, be sure and read this!

So! If that doesn’t bother you and you’re totally ok with all of that and you still really want to change the font of your entire blog posts… Then this tutorial is for you. :)

Using Multiple Fonts

First, if you want to use a second font, different from your post titles for your main blog posts… Go to your blogger-sifr.js file and find the lines that look something like this:

var kevinandamanda = {
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);

Copy and paste a duplicate of that right underneath it.

1. Convert and upload a new SWF font file, then replace the URL for the current SWF file with the URL to the new font.

2. Change the two instances of kevinandamanda to blogpostfont.

So when you’re done, it may look something like this:


var kevinandamanda = {
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);

var blogpostfont = {
src: 'http://username.webs.com/anotherfont.swf'
};
sIFR.activate(blogpostfont);

Next, paste this down at the bottom of your blogger-sifr.js file:

sIFR.replace(blogpostfont, {
selector: '#main-wrapper h3',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #000000; font-size: 24px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #000000; }'
,'a:hover { color: #000000; }'
],
wmode: 'transparent',
ratios: [6, 1.93, 10, 1.92, 13, 1.86, 17, 1.82, 21, 1.8, 29, 1.79, 32, 1.78, 33, 1.77, 36, 1.78, 43, 1.77, 44, 1.76, 47, 1.77, 70, 1.76, 71, 1.75, 74, 1.76, 75, 1.75, 76, 1.76, 1.75]
});

Now if you didn’t use a second font and just want to use the same font you’re using for your blog post titles, then you’ll need to change blogpostfont back to kevinandamanda.

You can still play around with the font size and color.

Save the blogger-sifr.js file when you’re done customizing.

Next, to get this to show up on your blog: Write a new post and switch over to the Edit Html tab.

use a custom font for your posts and titles on your blogger/blogspot blog

Wrap any text that you want to appear in your custom font with <h3> tags, so it might look something like this:

This text will be converted to a cute font!

This text will appear in the default blogger font.

That’s it! :)

click here to see a live demo

I will try and answer questions in the comments. (Please leave a link to your blog, or send me an invite if it’s private.)

If you got this to work on your blog, please post a link to your blog here so others can see an example! :)

If you found this tutorial helpful, I’d love it if you put one of my blog buttons on your blog! :)

You May Also Like:

Previous PostNext Post
119 Responses
  3. Whitney
    Reply

    Pardon me for commenting on a old post, but I have neglected my blog for quite some time now and was hoping to change my custom fonts… this was the tutorial I have always used with Webs.com and now I can’t seem to figure out how to make this work. They deleted my previous account, and with the new account I can’t seem to figure out how to make it a host. I have tried the Dropbox method, but I don’t have a public folder, and Dropbox said that new accounts don’t come with public folders anymore… any advice you can offer? Thanks!

  5. cheenu
    Reply

    Hi Amanda,

    Thanks for your previous tutorial on changing Post Titles. I can say that i’ve succeeded in the Ist tutorial!…..I desperately need to make this font work on blog posts!…..I followed your second tutorial, but i guess something went wrong!….I can’t spot the fault, eventhough i tried re-doing it again and again!….can you please rectify this for me!…

  6. Kim
    Reply

    I am also having the same issue with the tags making my post bold only…anybody able to crack this issue? I was able to get the headers to change perfectly fine, so this is confusing me a bit.

  8. Elena
    Reply

    Webs.com has not shut down. I just opened a new account today. I still can’t get this to work, though :/

    The ‘bold’ font thing is happening to me as well.

  10. Raylene
    Reply

    Thanks for your tuts! I followed your directions andit works like a charm. I just want to change the color of the font as the turquoise blue doesn’t show up on all backgrounds. I have an acct at Webs,com and am registered there, but they have no files that can be accessed. Should I start all over?

  13. natasha
    Reply

    hi Amanda,
    thanks for ur super easy tutorial.
    I finally am getting to where i would want my blog to look like…..

    waiting for more posts from u…

  15. Krystyn
    Reply

    Hi Amanda-

    Curious if you have heard/seen anything from webs.com. Many sites (yours here including) are no longer reflecting the changed font to the sidebars and post titles, etc. Curious if you know anything.

  16. Christine Conroy
    Reply

    Amanda-

    I just wanted to say THANK YOU for all of your tutorials, insight, and helpful hints! You have encouraged me to start my own blog and without your site I would have never been able to complete that task! You have also intrigued me to learn more about photography and hopefully I can share with you soon some of my photos! So check out my blog! http://fpfwithchristine.blogspot.com/

    Thanks!
    ♥ Christine

  17. kris
    Reply

    Hi Amanda!

    Changing the Post Titles worked great but how do I do another font for the sidebar? I see that this is for the entire post body as a second font but I want the sidebar font to be different I’ll keep trying but any help is much appreciated! :o)

    -Kris
    krisleighsen@yahoo.com

  18. Samuel Debritto
    Reply

    Dear Amanda,
    It’s not Working, can You send A Pic’ or Video about this Tutorial?
    Its so Hard to Me. Not Working. Thanks

  19. Crystal-Lee
    Reply

    Hello! I had a great time with your post titles and sidebar titles tutorial, but I cannot seem to get this one right. I am sure I’ve entered everything correctly, but when I add the tags into a post, all I get is bold print. In your previous tutorial, you specified that the new blogger template designer required a different blogger-srif.js file, so I’m wondering if that is why I’m having difficulty. Any ideas?

  21. annie
    Reply

    amanda! for some reason I can not get this to work. I have honestly tried it a million times. I had it working a while ago but ever since I changed fonts I cant get it to work. My titles show up but as soon as i try and change the text of my posts, not only does is not work but it also makes the titles and side bars go back to their original fonts. can you please help me. I have been trying for weeks. thank you!!!

  22. Shay
    Reply

    I am not very great with Blog posting. I am just wondering if you can give me some pointers on posting. I have only been posting with blogger and I know there are much easier ways to do it. I tried to post using Microsoft Word but I can’t load photos, can you give me an easier way to do it? Thanks!

  23. Ashley
    Reply

    Hi Amanda! I hope you (or anyone else) can reply to this! I think I did everything right….but instead of the font I chose showing up when I post, my old font shows up in *bold* letters. Where did I go wrong???

    ^^ I’m having the same problem… SOMEONE PLEASE EMAIL ME & HELP??

  24. Yasmin
    Reply

    Webs.com has changed drastically, and now if you want to have an html website they make the address ‘username.hostwebs.com’, and for some reason every time I try to click on one of the files it tells me there’s an error. This tutorial doesn’t work for the hostwebs thing… do you have any idea what’s wrong or how to fix it?

  27. Terri&Lizzie
    Reply

    hey Kevin&Amanda … any idea how to change the font on a new blog template… the html is not labelled ‘main-wrapper’

  29. Carmen
    Reply

    Ok, I have changed, redone, re-uploaded and redone again and I still cannot get the new font to work. Arghhh…Will keep trying to figure out what I am doing wrong. But thanks for the tutorial, at least there are options once I figure it out! :)

  31. Heather
    Reply

    Hi, Amanda! I love your fonts and tutorials! Thanks so much! I do have a question for you…

    So, my font does fine in the title and the body. But, if I want to add photos to it and also have the custom font, the photos don’t show up. There are just blank spaces where the photos should be. Any suggestions??

    Thanks!
    Heather

  32. Ally Kay
    Reply

    Amanda,

    I was searching and found your site, which is most useful and easy to follow. I’ve been dying to change the boring font on my blogspot but apparently, I’ve missed something or screwed something up. Please help!

    Thanks!
    Ally

  33. Tracey
    Reply

    Hi Amanda, I’m so glad I found your tutorial! It was just what I was looking for.

    I’ve been trying to change the sidebar fonts all night though, and i’m not having any luck. Wondering if it has something to do with the new blogger layout features.

    Wondering if you can help me out. Here is a link to my blog:
    http://www.verycuriouscrafter.blogspot.com/

    Thanks!

  35. Tina
    Reply

    My fonts work but my post font is too light. I want to bold it. I tried changing the the text from the file I made from your tutorial from normal to bold. However it became invisible so I changed it back. Is there another word I use or do I need to change the actual blogger file?

    Great tutorials!

  36. kecia
    Reply

    just found this tutorial for changing fonts. however, blogger has made some changes and now have all this “designing” stuff, so my pages don’t look the same as in your tutorial and thus i am not able to find the edit html section under layout. will there be an updated tutorial for their new changes?

    thanks!
    kecia

  37. Jessi
    Reply

    Hi Amanda, I thought I had left a comment but I guess not. I tried your tutorial and it was sooo easy! Thank you so much. I don’t think there were any major issues (there is a little extra padding above and below the text that I cant get rid of, but its not that bad, and my page doesnt load that slow… but not sure if thats because i only look at it from my computer… either way I love it!

    http://www.milspousemomma.blogspot.com

    Jessica

  39. Cristine
    Reply

    Hi Amanda.

    I just wanna say thank you so much for the tutorial. It took me awhile to get it right but with trial and error, I finally did it. Thank you again.

  43. Lisa
    Reply

    I find your site to be so fun and infomative problem is I am such a newbie I can’t get the fonts from you and from urban fonts to be in my blogger template for my blog. Can you help me at all? I tried to follow your turtorial but I am lost.

  44. Amy
    Reply

    Hey Amanda! I am just LOVING your fonts…here is my blog. I used both of your tutorials on using the fonts in Blogger, and even though it was my VERY FIRST TIME working with HTML, I totally accomplished it!

    Here is my blog. http://little-willa-lamb.blogspot.com

    But….I am having ONE issue. I decided the brown text is hard to see in the custom font, and so I wanted to change it back to black. But when I changed the color code for the full post text in my webs account, it didn’t change back to black on my blog. I even did a test (that’s my latest blog post) and it’s still brown…

    Is there a specific protocol you have to follow when you want to change the color of the 2nd font? When I wanted to change the color in the Post headings and Sidebar headings I didn’t have this issue. Help please?

  46. Reem
    Reply

    i believe that there is something missing, shouldn’t be a link of our web.com site name in this code?

    #main-wrapper h3 {
    color: #000000;
    font-size: 12px;
    text-align: left;
    }

  47. Caroline
    Reply

    …or, sorry…

    the code for

    “As for the unwanted spacing/padding, it works to do this…”

    was supposed to be:

    h3 style=”margin-top: -20px; margin-bottom: -70px;”

    (within the first bracket) and then ending with /h3 in brackets.

    (I had a typo in the last part of the code)

  48. Caroline
    Reply

    oops it didn’t show up…

    Where I wrote:

    “…then using blog-post text here , blog-post text here , blog-post text here in the post”

    it was supposed to have h4 – /h4, h5 – /h5, h6 – /h6 in brackets around the words.

    the code for

    “As for the unwanted spacing/padding, it works to do this…”

    was supposed to be:

    h3 style=”margin-top: -20px; margin-bottom: -70px;”

    (within the first bracket) and then ending with /h4 in brackets.

    I apologize if this no longer makes sense. I was hoping the code would show up…

  49. Caroline
    Reply

    About number 6 from your disclaimer:

    It is possible to make new font selections by labeling the additional options as “blogpostfont B”, “blogpostfont C”, “blogpostfont D”

    …then changing the selector to “#main-wrapper h4”, “#main-wrapper h5”, “#main-wrapper h6”

    …then using blog-post text here , blog-post text here , blog-post text here in the post.

    As for the unwanted spacing/padding, it works to do this:

    blog post text here

    (or whatever size px adjustment you need)

  50. Jenn
    Reply

    Thanks so much for this! I was able to implement my fonts for my titles, only on ones sidebar though I can’t figure out what I named my left sidebar. As well I implemented fonts using the tags, AND I did a signature! But of course I’m getting a blog redesign here soon so I will have something completely different but I loved these. I put your link on my blog too!

  51. Michela
    Reply

    I tried using this tutorial, and it worked! It’s my first time ever attempting to edit HTML, and I really appreciate the time and work it took for you to write this tutorial! Thanks so much! You can check out the new font at: posytheporcelainpig.blogspot.com.

    Again, THANK YOU!

  52. Liz
    Reply

    Hi Amanda,

    Thank you SO much for your tutorial! Very easy to follow. I did have a question though. How can I use multiple blogger-sifr.js files for my different blogs? The I don’t want the fonts on my craft blog to be the same on my personal blog. Can I change the name of the blogger-sifr.js file in webs.com?

  53. Brianne
    Reply

    Hello and thanks for the tutorials. I started off yesterday just changing the headers and date, and it turned out great (using one of your pea fonts :)). But then last night I found your tutorial on how tho do the whole thing and decided to do it. It worked fine last night but now today most of my pictures have disappeared, which has never happened before. Do you have any idea what the problem could be? I ended up taking the stuff off for the entire blog but it didn’t fix it. Could you please help me???

  54. Mike
    Reply

    Hi Amanda, I know this may be very simple but i really want to change the font on my blog but cant find the code you posted as step 1. Can someone please narrow it down for me? I am looking in the Edit Template HTML page? Also could you narrow it down a little more as to where i will find it.
    Any help on this would be much appreiated.

    Thanks
    Mike

  57. Tracey
    Reply

    YAY! This one worked right away. Thank you so much Amanda. I love this site. Keep up the good work, come check out the website.

    :)

  58. Nicole
    Reply

    Amanda,
    Thankyou so much for putting this out here for us all to use!
    I’m having a problem getting the size to change. I went through and changed all the sizes to 18 (in the html of the webs.com) and it’s still all huge (as you can see on my blog). I’ve refreshed and rebooted and it still stays the same. I guess I have some more playing around to do, huh?!
    Thanks again, I’m hooked!!!

  59. Caroline
    Reply

    I was wanting to use a font that I found on a website. It is actually quite perfect for me, but the letters are spaced just a tiny bit too close together, which makes it difficult to read. In my image editor I can adjust the kern, but when using it like this for the blog posts it is a problem. I haven’t saved any of my changes (I’m not sure if I even want to use it if it can’t be adjusted), so I won’t be able to show you an example, but here is the font itself on the website that offers it: http://www.dafont.com/romance-fatal-serif.font — you can sort of see in the preview (if you click on “tiny”) how the letters run together just a little bit.

    I was wondering if perhaps if there was a way to adjust this spacing in the code?

    Thanks :)

    Great tutorial btw

  61. yuki
    Reply

    Hello Amanda! Thanks so much for the tutorial. I was wondering if you know how to incorporate another font IF the chosen one doesn’t support a certain character so that it wouldn’t show blank spaces.

    ie, I have a custom font going and whenever I use Chinese/Japanese characters, they will not display.

    Thanks much!!

  63. Rebecca in Colorado
    Reply

    very good…I just commented on the other tutorial and asked about doing entire blog posts in a special font. I see here that it will make my page load more slowly, so I think that dictates that I won’t be trying it. I still like my title that’s so pretty…now for the feedback to see if others notice a slower page load!

  64. Chantay
    Reply

    This is the best and coolest site I’ve ever come upon. You are an amazing woman to do what you’ve done, just by sitting down and studying programming…Hats off to you!

    With that said, I had previously and with great success changed my font for the blogger post titles, dates, etc, but I cannot get this font to work for my actual ‘posting.’ When you say “Go to your blogger-sifr.js file,” I’m assuming that it’s the file (that I originally created to change my date and post title) that’s under “Webcom” with the pencil that I click on to edit, or it a file on my computer that I need to change? I’m so dazed and confused! Please, please, please help me. I’m going crazy!

  65. Lele
    Reply

    Darn it!! :( I used your other tutorial to change my title fonts and whatnot and it TOTALLY WORKED!!

    but when I tried to change maybe just a line of text using your method, it doesn’t change. It just makes it’s bigger and in bold.

    I did EVERYTHING you said too!!

    April 27th, 2009
    How To Use a Custom Font for Your Entire Blogger/Blogspot Posts

    Okok. So you want to change your *entire* posts to a funky font. Well, it can be done… Sort of.. I can’t figure out an easy way to change the font of your existing posts, but it can be done for any new posts you write.

    click here to see a live demo of what this tutorial does

    First- the boring stuff. Disclaimers. Warnings. Etc.

    1. This tutorial is a continuation of my How To Use a Cute Font for Your Blogger Post Titles, so you’ll have to do all the stuff in that tutorial before this one will work. :)
    2. I don’t really recommend writing every single post, all the time, the entire thing, in a custom font.
    3. sIFR is best used for changing titles and headers, not entire blocks of text.
    4. It will make your page load slower.
    5. It will make your page be all jumpy and crazy-looking as it’s loading.
    6. It won’t look perfect- you can only use one font color/size for everything you write and there may be some extra spacing/padding at the bottom, but there’s no that I know of to get rid of it (see what I mean about the padding on the demo).
    7. I kinda like plain, easy to read fonts for the main content of a blog anyway.
    8. If you created an account with Geocities, be sure and read this!

    So! If that doesn’t bother you and you’re totally ok with all of that and you still really want to change the font of your entire blog posts… Then this tutorial is for you. :)

    First, if you want to use a second font, different from your post titles for your main blog posts… Go to your blogger-sifr.js file and find the lines that look something like this:

    Where you said:

    “Next, paste this down at the bottom of your blogger-sifr.js file:” – is that what I really do? Paste that code to the BOTTOM of the file I was working (copy and pasting my new font code) or at the bottom of the page?

    Either way, it didn’t work and I’m just beside myself to find out exactly what I did wrong since I had such SUCCESS with the other tutorial and that seemed more difficult compared to this….?

    HELP AMANDA!! :) please please

    1. Jessica

      Im having the same problem! I have all the codes loaded up and it worked wonderfully on my blog, but then when I tried to do it for my friends blog (i made her a seperate blogger.sifr file) I have the exact same code for mine and hers and everything worked wonderful to change her titles but its not changing her blog post font…. should I change the h3 to h4 or something?

  68. sugarpinkicing
    Reply

    dear amanda, tq for the tutorial, I really luv your cute fonts. I managed to change the font for my post title and sidebar but unable to change the font for the linkbar, can u help me pls, I can be contacted at shashue@gmail.com. TQ

  70. Ashley
    Reply

    I changed my blogger dates and sidebar titles to a different font, but is there any way to change my post titles to a different font then the one I used for the dates and sidebar?

    Thanks for all the great info and instructions!
    Ashley

  72. Leo
    Reply

    Great tutorial! Does anyone know how to change the font to a custom font on the entire blog, ie not just post titles and dates but everything, the nav bar, text for the gadgets, comments, subcribe to, ie, everything? Thanks in advance for any help!

  74. ALexa
    Reply

    I love your blog! It has been very helpful to me while changing my blog design! I just have one problem- I want to change my post’s font (to the font your using actually-century gothic), and everything worked fine, but I tried to make the font smaller and it wouldn’t change. How can I fix it?

  75. Ashley N
    Reply

    Amanda, PLEASE READ THIS!
    I changed the font on my blog and everything worked great, however, I have noticed webs.com isn’t opening. Is there another site I can use? I need help!!!!!

  76. Amanda
    Reply

    LOVELY! I’ve been wanting to do this for a long time! One thing though… I’d love to be able to change my blog TITLE & DESCRIPTION to match the font that I now have for my Post Titles, Date, Sidebar Titles. Is there anyway that I can do this also? That would be fabulous if you know the HTML to change that! Fabulous! Thank you so much, & I love your site! ♥ Amanda

  77. Laura
    Reply

    Thank you Amanda! I just changed the font on my blog and it turned out great, I love it. Thanks so much. I was wondering if you had any idea if I could also change the font on the side bar under the photo captions. Thanks again.
    Laura
    http://www.bretnlaura.com

  80. Sarah
    Reply

    Thanks for your great tutorials! I was able to change the fonts for my sidebar and post titles as well as my blogger postings. Is there a way to change my other sidebar fonts?

  82. Marina
    Reply

    I’m extremely proud of myself for changing the post titles and dates to a new font with the help of your great tutorial, but somehow I am not able to manage this one? Am I missing something? Should I paste something into my blog’s HTML template?

    Please help?

  83. Stephanie
    Reply

    I cannot get my font to turn into a SWF font file and I am totally lost……I would really love to use a font but I am hing up on that one tiny part. Any help would be appreciated!!!

  84. the rauths
    Reply

    these are great tutorials! i am updating my blog and trying to get the “footer” area to show up in the cute font i used from your fonts. i cannot get it to show up (the part that says “life isn’t about waiting for the storm to pass …. ” ) … also is there a way for the font to show up in my blog title and the part that says “the rauths?” any help you might be able to lend, I’d greatly appreciate. Thanks!

  85. Kayla
    Reply

    Thank you so much for this! My blog has been pretty blah for a while and this was just what it needed!

    One question. How can I change the font on the entire page? Or at least my sidebar font?

  87. ashley
    Reply

    I absolutely love your fonts! I have used them for about a year now, but just downloaded all of them. They are so much fun! I teach high school and use power points quite often – so it is great to have some new fonts to add a little creativity!!

    I started a blog and have used your tips to change the fonts. It worked wonderfully! My only question is – I put pictures in the middle of my post and on the preview they show up, but when I actually publish the blog the pictures don’t show up. Is there a way to fix this?

    Thanks a bunch and deep up the great work!!

  88. Carin
    Reply

    It worked great! I love it. I did the font on just my titles, but now I can’t seem to change the color of the font on the sidebar titles. I’ve tried everything to change it, but it is bright pink… doesn’t match my layout. Any ideas???

  90. Michelle
    Reply

    I still can’t get it right! I can’t figure out what I’ve done wrong! I have redone everything three different times, maybe i’m putting something in the wrong spot, I don’t know. I’m able to get the blog titles to work right, but i cant get my blog font, the sidebars or the date to work right! Can you help me!!!

  91. Michelle
    Reply

    Hey Amanda! I just found your website today and have been tweaking my blog at every chance! I’ve just been having a problem adding the blog spot font. I’ve tried the pea squeaker and a little pot, and all it does is change the font to something else and the font color to orange. Can you help me?!?!

  93. Leslie
    Reply

    1. LOVE the fonts!!!!
    2. I added the fonts to my blog and did the tutorials, but can’t figure out how to get it to change the font on my sidebar…help!?!!

    My blog is private, so I will send you an invite.

    THANKS!

  94. Linaa
    Reply

    Dear Amanda,
    I did what the tutorial said but the font doesn’t change to my custom one. I am using the same one as the titles but nothing happneds when I add the and , do i need to add something to the Edit HTML part of my blog? Please reply ASAP. Thanks.

  95. Leon Turpentine
    Reply

    Hi I was wondering if there is any way i could make the font have a black fill?

    i.e If you highlighted it?
    Is there anyway this could be done?

  96. paige
    Reply

    amanda- you are so great! thanks for all the fonts and such! i am having a REALLY hard time trying to get a font to use for my blog. i have tried doing it a few times, and for some reason i just CANT figure it out! i dont know if there is anything you can do to help?!?

  99. Katie Smith
    Reply

    HELP! I just switched over to blogger and i discovered your great site. I have been messing around with the fonts. I’m having trouble with the blog post font. I have gone through your instructions from scratch. I an trying to use yout pea lauryn but it is not working. It turned my font color orange and to another font that was not pea lauryn. Can you help? I have done coding before but I am stumped. I hope you can help me before I have to redo everything. Thanks in advance. Katie

    http://lifewithparis.blogspot.com/

  100. Tayler Price
    Reply

    WOW thank you so much! I wrote you a little bit ago and it wasn’t working for me but I decided to try it again this morning and it totally worked! I’m really excited. Not only did it work but I was “carefully” messing around on my blog and figured out how to change all the fonts! :) YAY! I’m really excited!

  102. Francine
    Reply

    Hello!

    Thank you for the great tutorial!:-) I am looking forward to doing it, in hopes of ‘re-vamping’ my blog.

    I have a question though. I am still using the old blogger platform (since I am more confortable with css) so the font-changing work on my layout?:-/

  103. Motte Valois
    Reply

    Hi Aamanda and Kevin, I had a look on your tutorial and I have to confess it’s not difficult but requires a lot of work!!!!!(and time!), what I usually do to my title and links is simply create an image with photoshop, for example, and upload the new image-title with the font I want to use. Its much easier, as Im a bit lazy to work with scripts.

    Thank you for the tutorial anyway, Im sure there are lots of people who can do that from your little class here.
    Wonderful design by the way, I love the delicate style you both gave to your blog.
    A big hug from new Zealand

    2. sparrowchild

      i want to know too! how do you use an image for your post titles? and in addition to that, how do you use one for your page tabs? please tell!

  106. Ashley
    Reply

    AWESOME tutorial!! I can’t seem to get it to work for me on my self hosted wordpress blog. Stupid thing! It’s probably just because I’m super sleepy! :P

  107. ToAte
    Reply

    it doesn’t work for me or maybe i paste the thing at the wrong part? I’m still confuse where to paste when you said ” Next, paste this down at the bottom of your blogger-sifr.js file ” which part actually? :D

  108. Amber
    Reply

    Hi, I just found your blog while doing a search for fonts. Your website is wonderful I’m glad I found it. I will be back. :)

  111. Amanda
    Reply

    Good point, Roadshow. In the Blogger Dashboard, go to Layout, then Edit HTML and find </head>, and find where you pasted the other three lines of code. Then paste this code right above that:


    <style type='text/css'>
    #main-wrapper h3 {
    color: #000000;
    font-size: 12px;
    text-align: left;
    }
    </style>

    With that you can style the color, size and alignment of the Blogger font before the custom font loads.

  113. Amanda
    Reply

    Hey Shelley, those are great links, thank you for posting those. :)

    Those are great tutorials (and I would recommend using them) if you want to do all the things sIFR can’t. Like:

    1. Change the fonts on ALL posts (even existing ones) without having to add < h3 > tags around the text you want to change.
    2. You don’t want the page to be jumpy or load slowly
    3. You want to be able to use more than one font color and size.

    etc.

    Like Shelley said, there’s only a limited number of fonts you can choose from, but they’ll all pretty easily readable and are good for the main content of a blog.

    But if you do want to use your own, custom font, and you want everyone to be able to see it, even if they don’t have it installed on their computer, then this is the tutorial for you. :D
     

    click here to see an example

    of someone who’s changing the font of their entire posts using this tutorial! :)

Do you have a question or comment?

Meet Kevin & Amanda

Kevin and Amanda

We love to travel and to eat! Here we share our favorite quick and easy recipes, plus travel tips and guides for our favorite places around the world. If you have any questions about what camera I use or how I edit my photos, check out my photography tutorials.

READ MORE

Subscribe via Email: