How To Change Fonts on Tumblr


Changing Fonts on Tumblr is indeed easy, but it needs a bit of pacience and trial an error before it looks just the way you like it. In order to modify Tumblr Fonts you will need to edit the theme and the style.css file. Before you tell us that you’ve seen custom fonts on Tumblr that look awesome, we will write another post about them, since they need different steps to take in order to add them.

How to Edit Font Size, Color and Placement on Tumblr.

Editing the Theme HTML. – Go to Customize >> Theme >> Custom HTML.

  1. Font-Family (Type):  With Crtl+F look for the word Font, and start changing the available font-families The complete list is here.
  2. Font Color: With Crtl+F look for the word color and apply it to text and links.  You need to get the right color code, in order to do that visit this site and right below the color mixer circle, on the right hand you will obtain the rgb code, add the # sign first and finally replace the old color id.

Editing the .css File

  1. Once in your theme html, look for .css urls,  there probably will be more than 1 file, but just one of them is named style.css, and contains the full CSS elements and properties that help give your Theme its unique look.
  2. Copy the full .css url and then paste it in a new browser window.
  3. Right click on the windows and choose Select All, then Copy.
  4. Open a Notepad and paste all that content. save it as style.css
  5. Modify font-size, font-weight and color.
  6. Be careful with font-family properties when is included within @font-face, since this won’t have any effect, dont touch this.
  7. Save the style.css in your pc again.
  8. Upload the file with the Tumblr Uploader here.
  9. You will obtain a url file path, copy and then replace the old style.css url with the path you just’ve obtained.

We will be posting an article about custom fonts on Tumblr, so you get rif of the limit regarding the number of font families you can have on your blog.


3 Responses to "How To Change Fonts on Tumblr"

Add Comment
  1. Arabella

    August 12, 2012 at 3:33 am

    I’m sorry I’m sure this works perfectly but I don’t understand it at all. I stink at the HTML stuff, do you have an easier way to explain this?

    [Reply]

  2. Emma

    September 22, 2012 at 12:40 am

    Thank you so much for this! I found a beautiful theme but it posted everything in upper case so it looked like I was SHOUTING ALL THE TIME, I knew how to remove text-transform but couldn’t find it in the Custom CSS section. Thanks to your instructions I managed to download and modify the CSS file and now my site looks perfect. Thank you!

    [Reply]

  3. Stewmanchoo

    February 12, 2013 at 8:37 pm

    This solved the CSS font size issue for my new tumblr blog. Thanks!

    [Reply]

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>