How To Change Font In Tumblr Blog

Add a custom font to your theme (for beginners)

I am going to start by assuming you know nothing about html or css. You just got a new theme from one of the many independent theme-makers like me, but you like the idea of changing the title to a custom font. I can't make any promises that this will work, but it should work for most themes. Send me an ask if you get stuck and I'll be glad to help. Read more for a full set of instructions.

The very first step is to find out where in the code your title is.
- The title of your blog can (but not always) be found in the HTML by running a search on '{Title}'. You will probably find it twice. You do NOT want this one:
```
<title>{Title}</title>
```
  What you want to find is something like one of the four examples below:
```
<h1>{Title}&nbsp;</h1>
```
```
<div id="title">{Title}</div>
```
```
<a href="/">{Title}</a>
```
```
<span class="top">{Title}</span>
```
- If you can't find it, don't panic. Do you see a customise box that looks something like this?
  
  This means that instead of running a search on '{Title}' you should try searching 'Blog Title' instead. You should find something like this:
```
<div id="box">{text:Blog Title}</div>
```
Now that you've found out wherethe title is, there is a particular word in quotation marks that you need to find. These are the 'id' or 'class'. Get out a notepad to write down what the word is.
- If the code reads 'id=', then you add a #hashtag before the word in quotations:
```
<div id="title">{Title}</div>
```
  Add '#title' to your notepad.
```
<div id="box">{text:Blog Title}</div>
```
  Add '#box' to your notepad.
- If the code reads 'class=', then you add a .fullstop before the word in quotations:
```
<span class="top">{Title}</span>
```
  Add '.top' to your notepad.
- If there is NO id and NO class, then you can add your own. You will need to edit this in the html directly. Make sure to update preview then save once you have made this change.
  Example One:
  Change
```
<a href="/">{Title}</a>
```
  to
```
<a class="mytitle" href="/">{Title}</a>
```
  Example Two:
  
  Change
```
<h1>{Title}&nbsp;</h1>
```
  to
```
<h1 class="mytitle">{Title}&nbsp;</h1>
```
  After this you may add '.mytitle' to your notepad.
Now is the fun part. You get to pick your custom font. Check out google webfonts for the full list of fonts you can add.
- Once you have chosen, click 'Quick-use' next to the font (or 'Use' if you have been using the Collection feature). This will take you to a new page with a series of steps on how to use the font.
- Step #3 has a blue box with something that looks similar to this:
```
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'>
```
  Copy and paste this piece of code into your description. It doesn't matter where in the description, so long as it's in there.
- Now return to the webfonts page. Step #4 has a piece of code that looks like this:
```
font-family: 'Princess Sofia', cursive;
```
- Copy this into your note pad between curly brackets, but delete the word 'cursive'* if it's there (it may read 'serif' or 'sans-serif' instead, depending on the font you pick).
```
.mytitle {font-family: 'Princess Sofia';}
```
  ^{*'Cursive' is there as a backup option in case your font doesn't load. However most computers translate 'cursive' as 'comic sans', and comic sans needs to die.}
- Return to your tumblr page and open up the 'Advanced' tab. Copy what you have in your notepad into the 'Add Custom CSS' box.
Troubleshooting. What you have done so far will work better on some themes than others. No worries, here are some tips to make it work.
- If the font isn't showing up at all, add '!important' immediately after the font name. Example:
```
.mytitle {font-family: 'Princess Sofia'!important;}
```
  What this does is tells the browser to override the existing font.
- If the font is working, but it's too big or small, you will need to add a 'font-size' property.
```
.mytitle {font-family: 'Princess Sofia'; font-size: 20px;}
```
  You can change the px value to whatever works best for your theme.
- If you tried to use a cursive font, but the title is entirely in uppercase so you're stuck with too many swirly letters, there's a solution for that too.
```
.mytitle {font-family: 'Princess Sofia'; text-transform: capitalize;}
```
  'capitalize' makes the first letter of each word uppercase.
  'uppercase' makes the whole thing uppercase.
  'lowercase' makes the whole thing lowercase.
- A few extra things you can change are:
```
line-height: 100%;
```
  Changes the space between lines vertically. Only useful if there's more than one line of text. You can also enter a pixel value, eg '30px'.
```
text-align: center;
```
  Changes the horizontal alignment. Also 'left' and 'right'.
```
color: #2c4762;
```
  This changes the colour of the text. (This won't work if the text is a link, but most themes offer customise options for the title colour anyway so you probably won't need this.)
```
letter-spacing:1px;
```
  The space between letters. This can be a negative value.
- You can use '!important' on any of these if they don't work.

I have covered most of the issues you may run into. If your font is still not working, then send me a message. I will be happy to take a look at the problem.