Anouska Rood


A strategic website helps you
(finally) turn your side hustle
into a full-time business

Click the button below to get your free Website Strategy Workbook.

When I recently asked my readers what they were struggling with on their website, one of them answered:

I’ve tried to integrate a new font into my existing website and I still haven’t been able to do it – I end up using the available fonts.

In this post, I walk you through how to add a custom webfont to your site.

What is a custom font?

Any font that isn’t a default font is a custom font in my book. A small set of fonts is available on all computers (no matter if it’s Windows, Mac or Linux) and many years ago these were the so-called “web-safe” fonts. Websites would only use these fonts, because you could be sure that everyone would have the same font, so the website would look the same for everyone. Now, you can load custom fonts into your website and use any font you like.

Where do you get custom fonts?

A lot of themes already include some custom fonts for you to choose from, usually from Google Fonts. You can also buy fonts from sites like MyFonts and Creative Market. Another option is Typekit, which has a limited amount of their amazing fonts also available on the free plan.

If you want to add a Google font that’s not available in your theme to your site, I have a post on How to add Google Fonts to your website over here.

How to add a custom font to your site with Typekit

Once you’ve chosen a font, click the Add To Kit button and create your webfont kit. You get a code similar to this:

 <link rel="stylesheet" href="[random].css">

Copy this code and use the Insert Headers and Footers plugin to paste it into the header of your site. That’s all. Now you can use the font in your CSS like this:

h1 {font-family: "Your Font Name Here";}

How to add a downloaded custom webfont to your site

Once you’ve downloaded a font from a place like MyFonts or Creative Market, you get a zip file with font files, and sometimes with the CSS code ready for you to include. If you only get ttf and otf files, but the font you bought is allowed to be used on the web (check the license before you buy!), you can use the FontSquirrel Webfont Generator to generate more font files, which you need to make sure it’ll work in all browsers (Chrome, Firefox, Internet Explorer, Safari, etc.).

You can upload the font files (the files ending in ttf, otf, woff, eot and/or svg) to your site with FTP or in your hosting control panel (usually cPanel).

Once the font files are in a folder on your website (I’d put them in a folder called fonts inside your child theme), you need to include the files in your CSS like this:

@font-face {
font-family: 'Your Font Name Here';
src: url('fonts/filename.eot');
src: url('fonts/filename.eot?#iefix') format('embedded-opentype'),
url('fonts/filename.woff2') format('woff2'),
url('fonts/filename.woff') format('woff'),
url('fonts/filename.ttf') format('truetype');

If the CSS code is included with your font download, you can just copy it from there.

Including multiple styles of the same font on your site

If you have multiple versions of the font (bold, italic) to include, you can do that like this:

@font-face {
font-family: 'Your Font Name Here';
(src stuff here pointing to the Normal/Regular files);
font-weight: normal;
@font-face {
font-family: 'Your Font Name Here';
(src stuff here pointing to the Italic files);
font-style: italic;
@font-face {
font-family: 'Your Font Name Here';
(src stuff here pointing to the Bold files);
font-weight: bold;

Note how the font-family is the same with each @font-face. Sometimes, people use different font names for different styles of the same font.

@font-face {
font-family: 'Your Font Name Bold';
(src stuff here pointing to the Bold files)

The problem with this, is that the browser thinks this is a Regular version of Your Font Name Bold. If you then by accident use font-weight: bold on an element already using the bold version, the browser makes it faux-bold. Faux-bold means it doesn’t have files to use for the bold version so it just uses a bit of calculation to make it bolder than the “regular” version. This usually doesn’t look very good. This issue can be prevented by using the code I gave above, using the same font-family name for each version and using font-style: italic or font-weight: bold to assign the right styles to the right files.

Now you can use the font in your CSS like this:

h1 {font-family: "Your Font Name Here";}


h1 {font-family: "Your Font Name Here"; font-style: italic;}


h1 {font-family: "Your Font Name Here"; font-weight: bold;}

That’s all there is to it! I hope this helped you add custom fonts to your website.

Have any questions? Leave a comment below.

P.S. I wrote this specifically because a subscriber let me know she was struggling with this in a survey I recently sent. Not a subscriber but regularly read my posts? I’d love to hear from you too! Please take a few minutes to answer the survey.

Choosing fonts for your website can be hard if you have no idea about basic typographic principles. You probably know how you want your website to look, but you have no idea how to pick fonts that would work well, and work well together. Let’s dive into what you need to know to choose & combine fonts for your site to keep readers on it longer (so you can turn more of them into subscribers).

How to choose fonts: Readability

Readability is the most important part to pay attention to when choosing fonts. You want your text to be read, so make it easy to read for your websites’ visitors!

You’ll have several parts that need to be easy to read to a greater or lesser extent:

To choose an easy-to-read font, pay attention to the font-size you’ll use it with. A font that’s hard to read at a regular body font-size might work perfectly fine for a headline, if it’s used in a much larger size.

Small letters: what to pay attention to

For your main text, pay attention to the letters with small gaps, such as a, e, and g. When deciding the font-size, make sure the small openings in these letters are still big enough to distinguish them. When it gets too small (for example the e might start looking similar to c), your text becomes too hard to read. In these cases, pick a larger font-size for the body text. In 2009, a font-size of 12 – 14px used to be the regular size,  in 2013 14 – 16px became the regular size and now a quick look at font-sizes across different websites shows 18-21px to be the most commonly used.

Another thing you can experiment with is the line-height, which is the space between lines of text. When lines are too close together, the text gets harder to read, and people may lose their place in the text. On the other hand, if the lines are too far apart, the space will create disconnected lines, and the text becomes harder to read as well. As a general rule of thumb, a line-height between 1.2 and 1.5 times the font-size works well.

Also don’t justify text on your website. It might look pretty, but we don’t have the same level of control over the text as there is with print, so justifying text on your website actually makes it harder to read.

How to combine fonts

When combining fonts, make it easy on yourself by choosing fonts that are obviously different from each other. Avoid combining fonts that have barely noticeable differences between them. For your website, stick to a maximum of 2 or 3 font families, then use bold and italic versions of these families as needed. It could be one for headlines, one for body copy, and perhaps a third for things like quotes and other attention-grabbers. It all depends on the site and what you want to communicate.

Sticking with just one font family and adding variety with styles (normal, bold, italic, lowercase, and uppercase) may also work well for your website.

In general, it’s easy to combine a serif with a sans-serif font. Serifs are fonts that have strokes on the ends of their letters, whereas sans-serifs do not have these strokes. Another type of font is decorative or display fonts. These are generally harder to read and should not be used for large blocks of text, such as body copy. They may be used as headlines, but you do still need to make sure they’re easy to read even at a larger size.

Serif vs Sans-Serif

When combining fonts, they need to have a good contrast between them. You can accomplish that through serif and sans-serif differences or different size, weight and style (i.e. italic, all-caps, all lowercase, etc.).

Fonts to stay away from

Some fonts are or were widely available for free through operating systems and applications, such as Microsoft Word. They’ve become so overused for all sorts of things they were never designed for, they’ve become cliché and look amateur. Using these will not help in getting your content taken seriously. These include fonts like Bradley Hand, Brush Script, Comic Sans, Curlz MT and Papyrus. I also recommend avoiding Times New Roman, because it’s all too recognizable as a default font. It will make it look like you haven’t put any effort into the design.

Instead, use a webfont through Google Fonts or Typekit, or buy one of the many webfonts available through sites like MyFonts and Creative Market.

Want more? Fill in the fields below to download your free Guide to Visual Branding, including 6 great Google Fonts combinations.

The easiest way to have a visually appealing website is to keep it simple and stick to a limited color scheme. Pick four colors or less to create your color scheme. Pick two or three of your main values or likes (e.g. love, family, travel, your faith/religion, transformation, creation, organization, etc.) that you want to convey with your site. Then pick colors that convey those values. I’m giving a quick overview on color psychology and the science behind combining colors, to help you choose colors for your site.

How to choose colors for your site: The meaning of colors

When it comes to color psychology, keep in mind this is largely cultural: for example, in the western world, white means innocence, but in many Asian cultures white is actually the color of death. So if a large part of your target market is from a different culture, pay attention to what the colors you picked mean to them.

RedRed stands for love, energy, power, strength, passion, and heat, but also anger, danger, and warning.


OrangeOrange stands for courage, confidence, friendliness, and success, but also ignorance and sluggishness.


YellowYellow stands for brightness, energy, the sun, creativity, intelligence, and happiness, but also irresponsibility and instability.


GreenGreen stands for money, growth, fertility, freshness, healing, and nature, but also envy, jealousy, and guilt.


TurquoiseTurquoise is associated with spirituality, healing, protection, and sophistication, but also with envy and femininity.


BlueBlue stands for tranquility, love, loyalty, security, trust, and intelligence, but also coldness, fear, and masculinity.


PurplePurple symbolizes royalty, nobility, spirituality, luxury, and ambition, but also mystery and moodiness.


PinkPink symbolizes healthiness, happiness, compassion, sweetness, and playfulness, but also weakness, immaturity, and femininity.


BrownBrown stands for friendliness, the earth, the outdoors, and longevity, but also dogma and conservativeness.


BeigeTan/Beige stands for dependability, flexibility, and crispness, but also being dull, boring, and conservative.


GrayGray stands for security, reliability, intelligence and solidness, but also gloominess, sadness and conservativeness.


SilverA lighter gray or silver is also associated with glamour, high-tech, grace, and sleekness.


GoldGold stands for wealth, prosperity, and being valuable and traditional.


BlackBlack symbolizes protection, formality, class, and drama, but also with death, evil, and mystery.


WhiteWhite stands for goodness, innocence, purity, freshness, and cleanliness.


How to combine colors

colorwheel-coldwarm There are 6 common ways to combine colors to create an attractive color scheme for your website. They are based on the color wheel. The color wheel consists of all colors with the warm colors on one side and the cold colors on the other side. Similar colors are next to each other.

1. Monochromatic

colorwheel-monochromatic The first and easiest way to combine colors is using different shades of just one color. This creates a harmonious color scheme, producing a soothing effect and is very easy on the eyes. Combine the main color with neutral colors like black, white and gray. But, when using this scheme, it can be difficult to highlight important elements like your buttons.

2. Analogous

colorwheel-analogous This is a combination of colors that are next to each other on the color wheel. Use one color as the main color. The other colors are useful for making buttons and other important elements stand out.

3. Complementary

colorwheel-complementary These are two colors opposite of each other on the color wheel. When using the complementary scheme, it is important to choose one main color and use its complementary color for accents, so you will get a more vivacious vibe without overloading on color. You can also lighten or darken the main color to have more emphasis on the accent color (or vice versa).

4. Split complementary

colorwheel-splitcomplementary This is a scheme of three colors, one color on one side, the other two the immediate neighbors of the exact opposite of the first color. This gives a lot of contrast while giving you more choices to make elements stand out. This scheme generally conveys a vivacious vibe.

5. Triad

colorwheel-triad These are three colors that are the same distance from each other on the color wheel. It has strong visual contrast while being more balanced and harmonious than the complementary scheme.

6. Tetradic

colorwheel-tetradic This is actually a double complementary combination. This scheme is hard to harmonize; if you’re using all four colors in equal amounts, the scheme may look unbalanced, so you should choose one color to be the main color or lighten/darken all colors.

Resources to create your color scheme

Get some inspiration for your color scheme at Canva Color CombinationsColourLovers and Design Seeds, or create your own color scheme using Adobe Color CC.

Want more? Fill in the fields below to download your free Guide to Visual Branding, including some great font and color combinations.

Picking fonts to use on your website can be hard enough, but once you’ve chosen Google Fonts, you may be left confused about how to use them on your site.

Google offers three options to make the fonts available on your site: Standard, @import and Javascript. For each one, I recommend creating a child theme if you haven’t done so already.

Option 1: Standard

Open your child theme’s header.php and add the code, which is similar to this:

<link href='' rel='stylesheet' type='text/css'>

between the <head> and </head> tags.

Option 2: @import

Open your child theme’s style.css and add the css code:

@import url(;

immediately below the comments declaring what theme it is and such.

Option 3: Javascript

Open your child theme’s header.php and add the code between the <head> and </head> tags.

So, which is the best way to add Google Fonts to your site?

The standard way to include webfonts will have the least impact on the speed of your site. On slow connections though, visitors to your site may see the so-called Flash of Unstyled Text (FOUT), your text will show in a diffent font, then switch to your Google font once that has loaded.
The @import way will prevent that, but may slow down your site because it’ll wait for the font to load, then show the content.
The Javascript code is part of the WebFont Loader, which is a Javascript library developed by Google and Typekit that will give you more control over font loading. It’s unlikely you need the kind of control the Javascript code provides and it’s more complex than you’d probably like.

Standard is standard for a reason. It’s most likely the best way for you to include the fonts on your website. It’s better for visitors on slow connections to be able to at least see & read the content, than to have them wait longer until the included font has loaded.

That said, it’s always a good idea to optimize your site to make it load as fast as it possibly can. With regard to Google Fonts, this means:

1. Combine multiple fonts into one request.

You can do so with the pipe character “|”. So, instead of:

<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="">


<link rel="stylesheet" type="text/css" href=" +Sans|Lobster">

2. Don’t ask for fonts you don’t use.

This may seem obvious, but if you don’t actually use a font, don’t include it. Some browsers only load the font files needed to render the text on the page, but others will load all fonts included, which will slow down your site.

Actually using the font on your site

So far, we’ve actually only added the fonts to be able to use them, but they won’t show up until you tell them where to show up.

Open your theme’s style.css and add the css code:

font-family: 'Open Sans', sans-serif;

to the elements you want to use the font for. This could be the body tag, if you want to use it on all or most text on your site:

body {
 font-family: 'Open Sans', sans-serif;

Or if you want to use it just on headings, you can add it like this:

h1, h2, h3, h4, h5, h6 {
 font-family: 'Open Sans', sans-serif;

Save the files you’ve edited and upload to your site.

You may also like to use your chosen Google fonts in your images, to make them match the rest of your site.

Sign up below to get your Online Business Toolkit – with 70 tools every online service-based business needs!

Lately I’ve come across more and more people who want to justify text on their website, because it ‘looks good’, it creates a nice looking column. Do you want to justify text on your website, too? The problem with this is that your site shouldn’t only look good, it should be easy to read & use.

There’s a difference between reading on a screen and reading on paper

Reading on a screen is fundamentally different from reading on paper. In a newspaper or book, justified text is the default. Reading on a screen is harder on the eyes as it is already, justified text on a screen will only make it harder.

For print (including PDFs and such), designers have a lot more control on spacing between letters & words to make sure the justified text has good readability. On the web, we don’t have that. Justified text creates what’s called “rivers” of white space. This is when the spaces between words line up with other lines of text, creating a column of space down the content.


This river within the text draws the eye away from the content making it more difficult to read. You lose your place in the text as a non-dyslexic reader, but even more so for dyslexic readers. Although the percentage of people with dyslexia is unknown, it has been estimated to be as low as 5% and as high as 17% of the population being dyslexic. You might want to make your website as user-friendly to both non-dyslexic readers and dyslexic readers.

Want to learn more about what you can do to make your text easier to read for dyslexic readers? This is an interesting read: 6 surprising bad practices that hurt dyslexic users.

To promote your blog on social media, you need to have text on images so people know what it’s about, and your images need to look gorgeous so people actually click to read your content. Read on to learn how to add text to images in a way that looks good.

There are two major points to pay attention to when placing text on an image: contrast and position.

Add text to images: Contrast

Contrast is about making sure the text is readable. Don’t use white text on a light background, or dark text on a dark background. If you have a busy image, lighten or darken the image. You can do so by putting either a white or black partially transparent layer on top of it. That will allow for better contrast between the image and the text.

Text on Images: Contrast

Add text to images: Position

Position is about where you put the text on the image. The center of the image can be good, and is a fairly easy way that’s generally fail-proof.

Text On Images: Position Centered

Don’t put the text on the very edges, that generally makes it look cramped and awkward. If you want to put it in a more interesting place on the image, play around with the rule of thirds. Divide your image into three equal size sections horizontally as well as vertically, so you end up with 9 equal size sections on your image. In most great photos, you will notice the subject of the photo is on one of the intersections between the horizontal and vertical lines. You’ll want to put your text on such an intersection too. Don’t put it over the subject, instead give it space by using the intersection diagonally opposite of it. If the subject of the photo isn’t on such an intersection, play around with placing the text on the different intersections and see where you like it best.

Text On Images: Rule of Thirds

Use Google Fonts in your images to make them fit in with the rest of your site. And make sure to use quality photos for your visuals.