Change the fonts in your WordPress theme

To change fonts on a wordpress.com theme you will need the Custom Design upgrade. It’s best to choose a theme that fits already your needs and uses a font family and size you like. Often there is no need to change the fonts because the theme uses already web friendly fonts.

With the Custom Design upgrade wordpress.com offers the possibility to embed non-system-specific custom fonts into your blog. This works without programming CSS.  It’s a very nice feature but use it wisely. It tempts you to use fonts that are not adapted for websites.

custom fonts menu on www.wordpress.com

Wordpress custom fonts

  • Go to Appearance > Custom Design on your blog’s dashboard.
  • Open the “Fonts” tab.
  • Browse the fonts and choose a font for the site title, for the headings and for the body text.
  • Adjust the font size and style.
  • Save your changes and wait a few minutes till the fonts show up on your blog.

It didn’t work?
Visit the WordPress Support Center

Related links

Advertisements

Change the fonts in your Wix theme

  1. Go to www.wix.com and open your design template.
  2. Click on the title or the paragraph to change the font and choose “Edit” on the menu.

    Edit a paragraph

    Edit paragraph

  3. An additional toolbar will be shown on the screen and you can edit font, size, colour, style, alignment and line height of the text element.
    Sometimes the fonts for the body text are already set or limited so that you may not be able to use the font family you want.

    Toolbar to edit the text element

    Wix text editor

It didn’t work?
Visit the Wix Support Center

Related links

Change the fonts in your Weebly theme

  1. Go to www.weebly.com and click on the “Design” record to open the design template.
  2. Click on “Design Options” on the left navigation bar.
  3. Edit font, colour, size and line height of the paragraph text and the paragraph title. The paragraph text corresponds with the body text and the paragraph title is what you have defined as the heading.

    Go to Design Options and change Site Title, Paragraph Title, Paragraph Text and Links

    Weebly design options

  4. If your template shows a site title on the top of your page you can also define the font, colour and size of this title. If you don’t want to show the site title you can just ignore this element and turn off the site title in the “Settings”record.

    Edit Site Settings and turn off the site title

    Weebly edit site settings to turn off the site title

It didn’t work?
Visit the Weebly Support Center

Related links

Format your fonts

1. Define your font colours

Choose one colour for your headings and another for the body text. The headings should use the same colour you defined for the page header.

Make sure there is sufficient contrast between text and background.For the body text dark grey or black on a light background works best. If you use a black background choose white for the body text.

Write down your colour definitions:

  • Body text: #1D1F1F
  • Heading: #7f004f

2. Define the type size

The body text should use a type size between 10 and 14 points. Make it even bigger if possible. Users with small notebook monitors will love you for making the type size as big as possible!

The type size of the heading should be about 150% of the body text. Let’s say you use 14 points for the body text; then you should use 21 points for your headings.

Headings have a hierarchy. Define a level-one heading with 150% of the body text size and a level-two heading with 125% of the body text size.

Write down your size definitions:

  • Body text: 14 points
  • Heading (level 1): 21 points
  • Heading (level 2): 17 points

Use www.typetester.org to compare the different font sizes. You can insert a base font size on the upper right corner.

On Typetester the type size is not measured in pixels, but in Ems (em). This is a scalable unit that is very popular for fonts on the web.
1 em is equal to the defined base font size.
1.5 em = 150% of the base font size.
If your base font size is 14 points, 1.5 em would equal 21 points (14 x 1.5=21).

3. Define the line height

Put some space between the lines with the line height functionality. The line height should be 110% to 140% of the body text height.

Write down your line height definition:

  • line height: 19 points

Use www.typetester.org to compare the different line heights. The line height is called “leading” on Typetester. It’s also measured in em instead of pixels.
1 em is equal to your base font size.
1.3 em = 130% of the base font size.

Related links

Choose a font

1. Choose a font for your headings

Define two font-families for your website: one for the headings and another one for the body text. The two font-families should be very different from each other. You can for example choose a sans-serif font for the headings and a serif font for the body text.

Both, serif and sans-serif fonts work well for headings. However, sans-serif fonts such as Arial or Verdana are a little bit simpler and seem clean, modern and uncluttered. They are effective as headings and you can play with their bold style.

Write down the font you choose for your headings.
For example: Heading = Verdana.

Heading examples for sans-serif fonts at 14 points.

Use www.typetester.org to compare the different fonts.

Arial

Helvetica (is not installed on Windows. Windows users will see Arial.)

Lucida Sans

Lucida Grande

Trebuchet MS

Verdana

Tahoma

Century Gothic

2. Choose a font for your body text

Most websites use sans-serif fonts such as Verdana or Arial for their body text. They are considered modern and are often used in technical contexts. But in fact serif fonts also work very well for body text, especially if you have text-heavy pages that are intended to be printed. Serif fonts are traditionally used in newspapers and have an intellectual touch. They are easy to read in small point sizes and are often considered more personal than sans-serif fonts.

Write down the font you choose for your body text.
For example: Body Text = Georgia

Text examples for serif fonts at 12 points.

Use www.typetester.org to compare the different fonts.

Courier New

Georgia

Lucida bright

Palatino

Times New Roman / Times

Related links