How to Change Quote Fonts on Tumblr

Tumblr enables you to customize your personal Tumblr page to make it look almost any way you want. For example, by default Tumblr packs quotations -- also called blockquotes -- pretty closely together, which can make them hard to distinguish from your own text. You can change this by setting quotes apart with a custom font. To make a formatting change to the blockquote font, modify Tumblr's internal style sheets.

Video of the Day

Young boy at work on laptop
To change Tumblr quote fonts, modify the blockquote element in CSS.
credit: Image Source Pink/Image Source/Getty Images

Choosing Your New Quote Font

Before you begin editing, choose the font you want to use for quotations. Make sure it's a "Web-safe" font, i.e. a common font that most computers and devices already have. If you use an obscure font, then devices without it will display a generic font instead. You should also avoid using copyrighted fonts, as they are both obscure and require express permission from the copyright holder. The website CSS Font Stack has a list of Web-safe, non-proprietary fonts, as well as a tool that quickly copies the one you want to your clipboard. Notice that, instead of just one font, CSS Font Stack uses "font stacks." This fail-safe design specifies multiple fonts of an increasingly generic quality, so that if a user doesn't have the first font that you pick, her browser checks for the second font instead, then the third font and so on. If you use a font stack, the font definition will look something like this:

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

The syntax is important; "font-family" is the CSS property that sets fonts, while the commas separate each increasingly generic font. For a single font, you won't need commas. In addition, note the quotation marks around "Helvetica Neue" which are required for multi-word fonts. Finally, the semicolon at the end tells browsers that the instructions for that particular declaration -- in this case, setting the font -- are over.

Understanding the Task

To change fonts in Tumblr, add a single line of CSS markup. CSS -- Cascading Style Sheets -- isn't a programming language, and you don't need to understand programming to do this. CSS is the primary tool for setting the look and feel of a Web page. To change the quote fonts for your Tumblr, you will create a CSS instruction in your Tumblr customizable theme.

Accessing Your Theme and Your Blockquote Definition

Log in to Tumblr and go to your homepage. To access your theme, click the "Edit Theme" button next to the "Dashboard" button. Click "Edit HTML" below the Custom Theme section to open the HTML editor.

In HTML, the element called "blockquote" contains long-form quotations, so you'll be looking for the part of the style sheet that governs blockquote formatting. Click anywhere inside the HTML editor, then press "Ctrl-F" to open the editor's search box. Type "blockquote" (without the quotation marks). The first result should be the correct one, although some custom themes may vary. The one you want should be heavily indented, and should look something like this:

#wrapper #content .post .copy blockquote { margin: 10px 0px 10px 10px; padding-left: 15px; border-left: solid 4px #dcdcdc; }

The particular values may be different. The key is that the word "blockquote" appears only one time before the opening brace, {.

Entering the New CSS Declaration

Click just after the final semicolon, and make sure it's before the closing brace, }. Press "Enter" to create a new line. Tumblr's editor should automatically indent the line for you, but don't worry if it doesn't because the indentation is only for visual appearance to make reading it easier. On the new line, paste or type the font that you want to use for quotes. It should look something like this, substituting the names of the fonts you want to use for the examples given here:

font-family: Arial;

Or, if you're using a font stack, it should look something like this:

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

In context, the new line of CSS should look similar to this:

#wrapper #content .post .copy blockquote { margin: 10px 0px 10px 10px; padding-left: 15px; border-left: solid 4px #dcdcdc; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }

Once finished, click the "Update Preview" button at the top of the HTML editor. The changes may not show up in the preview, so click "Save" and then load your Tumblr homepage in a new browser tab. If you did everything correctly, you will see the new font for all quoted content. Note that, depending on the font you pick, you may want to add another line of CSS to make the font size bigger or smaller. For that, use the "font-size" property and enter a percentage, like this:


Remember to put it before the closing brace, and remember your semicolon.

Show Comments