Google has made it possible to easily use a wide array of custom fonts with their font API.

In this tutorial I am going to change the font used in the headers for the All-Out and the Inside-Out template. I am not saying this example looks better then the original, but I think you get my point.

Goal: Replacing the default fresh.li fonts with one of the Google Webfonts.

Difficulty: Medium, some basic HTML knowledge is good but you’ll get really far by just trying it out and changing the example to your liking.

BEFORE:

AFTER:

To do this go to your settings and check the box Use Custom Css, then click edit stylesheet. A popup box will open in wich you can paste the code. You can always uncheck the box if you do not want a custom css any more, or revert to default.

• First you import the font you want to use from Google Webfonts by using the @import code. In the example I used Lobster. You can find this code if you click your desired font -> Get the code -> Advanced techniques.

• Then write down the CSS selectors of all the titles (class and id names usually).
• Then declare the font-family. The default font-weight for this example is bold, I wanted it to be normal, made it a little bigger and changed the color.

And that’s it! Copy the code below and paste it in the popup box to start customizing your portfolio.

@import url(http://fonts.googleapis.com/css?family=Lobster);


h3, #menu li.page, #menu li.page a,  #menu li.section{
  font-family: 'Lobster', arial, serif;
  font-weight: normal;
  font-size: 22px;
  color: #ff0060;
}