Change the fonts in your WordPress theme

To change fonts on a 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 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

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

Change the fonts in your Wix theme

  1. Go to 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 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 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 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