How to Change Font on a Custom HTML Blog Design
By: Molly D.

Nowadays, tons of people around the world have online blogs for many different reasons. They may be used to post pictures, share videos and music, or even as diaries of sorts. Anyone can use a blog; even celebrities do! The main focus of a blog is to share and connect with others while at the same time showing creativity and uniqueness. Most blogs use HTML to design and create custom blog designs/themes, ranging from how the layout looks to what font is used. Here, I will be showing how to change font sizes and styles on a custom created HTML blog design. I will be using "Tumblr", a great blogging website, to show how to do this.

Before and after editing font:
collage_tumblr.jpg

Step 1 - Creating a Blog
To first show you how to change the font an on HTML created blog, we'll obviously need to create a blog first!
Follow this link to go to Tumblr to create a blog: www.tumblr.com/
You'll first be taken to this page:
Tumblr_2_EDIT.jpg
This is the Tumblr sign-up page. Go ahead and enter your email address, create a password, make a URL for your blog. The URL can be anything you like, so be creative!
Once you have done this, go ahead and click on the green "Start posting!" button.

Once you've done so, you'll be taken to this page:
Tumblr_4_EDIT.jpg
Go ahead and enter the code you see in on your screen. Click on the green "I'm human!" button when you're finished.

You'll then be taken to a series of different pop-ups with info. They're not very important right now, so go ahead and continue to click out out of the pages until you get to this page alone:
Tumblr_10_EDIT.jpg
Once here, go ahead and click on the link that should say the name of the URL you created earlier. It should be similar to ".tumblr.com" and is on the right-hand side of the page.

You'll then be taken to this page, which is your new blog! Congrats!
Tumblr_27_EDIT2.jpg
You have just made a blog on Tumblr! It's blank right now, but you can absolutely customize it by going to Step 2 and choosing your own theme. For now, you'll be using the theme "Columnz" as an example.

Step 2 - Choosing a Blog Theme
In this step, you'll be choosing a blog a theme called "Columnz". It's a simple, yet creative and unique theme that can easily change its HTML format.
Let's change the theme by clicking on "Customize":
Tumblr_27_EDIT.jpg

Then clicking on "Theme", and then on "Browse more themes...":
Tumblr_11_EDIT2.jpg

A message saying "Opening the Theme Garden will lose any unsaved changes. Proceed?" will pop-up. Go ahead and click "OK".
Tumblr_12_EDIT.jpg

Afterwards you will be taken to the Theme Garden! This is where all sorts of blog themes and designs are at on Tumblr. There are a bunch of great designs you can choose from, but for now we will be using a theme called "Columnz".

To do so, click on the "Popular" tab.
Tumblr_14_EDIT.jpg

Now, hold Ctrl down and push C, F, and V on your keyboard to open the search box. Type in "columnz" in the search box. "Columnz" should then appear on the page, similarily as shown below.
Tumblr_16_EDIT2.jpg

Follow by clicking "Install".


You'll be taken to this page:

Tumblr_18_EDIT.jpg

Go ahead and click on "+ Install theme".

Now the new blog theme has been installed! We'll now continue to actually editing the blog's font style and size in the Step 3.

Step 3 - Changing the Font Style and Size

In this step, you'll finally be able to see how to change the font style and size on the HTML blog. Let's do this by editing the HTML.



You'll first be on this page:

Tumblr_19_EDIT.jpg

Go ahead by clicking on "Customize".

Now click on "Theme", and "Use custom HTML".



Tumblr_21_EDIT.jpg

The HTML format for this blog design will now appear, looking like below:

Tumblr_22_EDIT.jpg


Scroll down a bit until you see " div {font-family:arial; font-size:11px; line-height:14px; color:{color:Font};} "


tumblr_25_EDIT.jpg

Now, this is the part where you can be creative. Where it says "font-family:arial" and "font-size:11px", go ahead and change the font style and size to whatever you like. Try fonts like "times new roman", "century gothic", or "calibri", and try sizes like "20", "36", or "48".

.
Let's try "times new roman", and size "36" font.

tumblr_28_EDIT.jpg

tumblr_29_EDIT.jpg

Once you've done this, click on the "Theme" tab again, and a preview of your newly changed font style and size should appear on

the blog. Congrats! You just changed the font on a custom HTML blog design!