How to Change the Font on Your Tumblr Blog and Theme

PDF download Download Article
PDF download Download Article

Do you want to customize the font on your Tumblr posts or theme? Each Tumblr theme has different font options you can edit, with some themes having more customization options than others. If you don't like the font options available in your favorite theme, you can switch themes or edit the HTML code to add your favorite fonts to your blog. This wikiHow article will teach you two simple ways to change the font on your Tumblr blog and theme.

Method 1
Method 1 of 2:

Using Theme Options

PDF download Download Article
  1. It's the outline of a person at the top-right corner of Tumblr. A menu will expand.
  2. You'll see it on the account menu.
    • If you have more than one blog connected to this account, click the name of the blog on the menu first. Then, click the Account icon again—you can now select Edit Appearance for that blog.
    Advertisement
  3. You'll see this next to "Website Theme" in the left panel. All of the options you can change for your blog theme appear here.
  4. Scroll down until you see your theme's font options in the left panel. The font options you can change here will depend on the theme you're using.
    • For example, some themes have separate areas for font size and type. Others have one "Body" font that you can change.
    • If the theme you're using doesn't have enough font options for you, click Browse themes at the top-left corner of the page to browse for and select a different theme .
  5. You can now modify any of the font options in the left panel.
    • If your theme doesn't have a drop-down menu with font names, you can list font by name into the field. For a full list of fonts you can safely use on Tumblr, check out https://www.cssfontstack.com/Web-Fonts .
    • If you don't like the theme's font options but don't want to choose a different theme, you can edit the theme's HTML code to add and customize fonts.
  6. You'll see it at the top of the left panel. Any font changes you've made are now live.
    7. Advertisement
Method 2
Method 2 of 2:

Editing HTML

PDF download Download Article
  1. It's the outline of a person at the top-right corner of Tumblr. A menu will expand.
    • This method will show you how to customize the code of your Tumblr theme to add and edit fonts that you can't change with the theme editor.
    • You'll need a basic understanding of HTML and CSS to use this method.
  2. You'll see it on the account menu.
    • If you have more than one blog connected to this account, click the name of the blog on the menu first. Then, click the Account icon again—you can now select Edit Appearance for that blog.
  3. You'll see this next to "Website Theme" in the left panel. All of the options you can change for your blog theme appear here.
  4. This is at the top of the left menu, below your theme's title.
  5. This opens the Find tool.
  6. Now you should see all of the places in the HTML editor that mention "font."
  7. You'll want to look for all instances of "Font" that mention a font name, such as Georgia, Helvetica, or Arial. Any time you see a font name, you can swap it out with any of the fonts listed on this page: https://www.cssfontstack.com/Web-Fonts .
    • You can also use Google Fonts on Tumblr. Just go to https://fonts.google.com . Click a font you like, highlight the code in the "Use on the web" area at the bottom right, then press Cmd + C (Mac) or Ctrl + C (PC) to copy it. [1] Then, go back to the HTML code of your theme and paste the copied code after <!DOCTYPE html PUBLIC> by pressing Cmd + V (Mac) or Ctrl + V (PC).
    • If you add a Google font, you'll need to specify the font using the CSS "font family" property. For example, if you use the font Source Sans Pro, you'd use font-family: 'Source Sans Pro', sans-serif; .
    • There might be multiple "font-family" or "font" sections because there can be multiple fonts in a given theme. You'll be able to tell which section correlates to which place in your theme by looking at the header above each mention of "font-family" or "font." For example, there may be one labeled "h1" that corresponds to the font of Header 1.
  8. This is the green button in the top corner of the left panel. You should see the fonts change if you did it correctly.
  9. Once you are happy with your results, click on this blue button in the top right corner. The font changes you made will now save.
  10. It's at the top of the sidebar menu on the left. This saves all of your changes.
  11. It's in the upper-left corner of the sidebar menu to the left. This takes you back to the Account Settings menu.
    12. Advertisement

Community Q&A

Search
Add New Question
  • Question
    I did as instructed, but the preview showed no change. What could I have done wrong?
    Community Answer
    Make sure you are selecting the element you wish to change the font for. If you want the font in the tag to be Helvetica, make sure that no tags inside that tag have a defined font. For example, if you have only tags inside a tag and you have given the tag a font of Arial, no text in that tag will be able to change to Helvetica.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 1 Helpful 1
  • Question
    When I go to my HTML, there isn't a "font-family," but there is "font-weight." Are they the same thing?
    Community Answer
    They are not the same thing. Font-family is the typeface, whereas font-weight is the level of boldness of the text. Font-family, if spelled correctly, should always work in the CSS.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 0 Helpful 0
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      Tumblr Tips and Tricks


      You Might Also Like

      How to
      Use Tumblr: The Complete Beginner's Guide
      How to
      Create a Custom Page on Tumblr
      How to
      Delete a Blog on Tumblr
      How to
      Make Text Blink in HTML: Easy Tutorial
      How to
      Download Audio from Tumblr
      9 Easy Steps to Save GIFs from Tumblr on a Computer
      How to
      Find People on Tumblr
      Making Tumblr Private: Password Protection, Hiding Posts, & More
      Simple Ways to See Who Follows You on Tumblr
      How to
      Comment on Tumblr
      How to
      Enable the Ask Feature in Tumblr
      How to
      Change Your Profile Picture on Tumblr
      Advertisement

      References

      1. ↑ https://fonts.google.com

      About This Article

      Article Summary X

      1. Go to https://www.tumblr.com in a web browser.
      2. Click the icon that resembles a person in the upper-right corner.
      3. Click Settings .
      4. Click the blog you want to edit in the column on the left
      5. Click Edit Theme .
      6. Click Browse Themes .
      7. Select a theme and click Use .
      8. Select a font using the drop-down menus in the sidebar to the left.
      9. Use the colored circles in the sidebar menu to the left to change the color of your text.
      10. Select a font size using the drop-down menus in the sidebar to the left.
      11. Click Save at the top of the sidebar menu to the left.
      12. Click Exit in the upper-right corner fo the sidebar to the left.

      Did this summary help you?
      In other languages
      Thanks to all authors for creating a page that has been read 385,697 times.

      Is this article up to date?

      Advertisement