Pin Me

Changing Fonts in an HTML Template

written by: Ada Stoy•edited by: Simon Hill•updated: 1/11/2010

There are so many free HTML templates on the net. Very often you find such a template and you would like to use it but you need to make some changes. For instance, if you want to change the fonts in a HTML template, here is how you can do it.

  • slide 1 of 2

    How to Change Fonts in a HTML Template, Which Uses a CSS

    When you get an HTML template and you want to change the fonts it uses, before you start making any modifications to the template, double check if the license allows any modifications whatsoever. If the license allows modifications and you want to tweak the fonts, here is how to change fonts in a html template.

    First, you need to see if the html template uses a cascading style sheet (CSS) or not. If the HTML template uses a CSS then follow these steps:

    1. Open the CSS file for the template. The CSS file could be in a separate folder or in the root directory. In any case, make a copy of it before you start changing the fonts.

    2. Decide what you want to change. Basically, you can change the font family, the size, the color, the line spacing, the line height, etc. You can also make the text bold or italic (or both), all caps, small caps, etc. For a list of all font properties you can modify via a CSS, check this article.

    3. After you find the property you want to modify, make the necessary changes. For instance, if you have the following:

    body {

    font-family: Verdana, Arial, sans-serif;

    font-size: 12px;

    color: #000000;

    background-color: #FFFFFF;

    }

    and you want to make the text larger, you can modify the font-size property as follows:

    body {

    font-family: Verdana, Arial, sans-serif;

    font-size: 14px;

    color: #000000;

    background-color: #FFFFFF;

    }

    Similarly, if you want to change the font color, you give a different value to the color: entry. If you want to change the font family in the HTML template, you replace Verdana, Arial, sans-serif with the fonts you like – the principle is similar. All you need to know in order to change fonts in an HTML template which uses CSS is the name of the font property you want to change and what you want to replace it with.

    When you are done with the changes to the fonts in the HTML template, save the CSS and reload the page in your browser. If you can't save the changes, check if the template is writeable because if it isn't, you wont be able to save them.

  • slide 2 of 2

    How to Change Fonts in a HTML Template, Which Doesn't Use a CSS

    The second case you might encounter when you want to change fonts in a html template is when there is no CSS.

    Use of CSS is recommended but since it is not mandatory, it is quite possible to find templates where there is no CSS. In this case you need to modify the fonts in the HTML file itself. This isn't harder to do except that there might be hundreds of occurrences you need to modify. Here is what you need to do in order to change fonts in a html template, which doesn't use CSS.

    1. Open all HTML files where the font needs to be changed. Make sure you have a backup copy of all the files you will modify.

    2. Similarly to changing the font in a HTML template, which uses CSS, you can change the font family, the size, the color, the line spacing, the line height, etc. You can also make the text bold or italic (or both), all caps, small caps, etc. The font properties you can modify are listed here. However, the difference is that you make these changes in the <font> tag.

    3. Find the <font> tag for the paragraph you want to modify. For instance, if you have the following :

    <font color="#800000"> <font size=4 style="font-size: 16pt"><b>Text</b></font></font>

    and you want to remove the bold and change the color to black, here is how to do it:

    <font color="#000000"> <font size=4 style="font-size: 16pt">Text</font></font>

    When you have made the changes, save the file. If you can't save it, one possible reason is that you don't have the appropriate write permissions. Get them and try again.

    As you see, it is easy to change fonts in a HTML template. If the HTML template uses a CSS, it is faster because you don't have to change thousands of occurrences. Even if the HTML template doesn't use CSS, you can still change fonts but it takes a bit longer to do it.