How to Change Fonts in a HTML Template

How to Change Fonts in a HTML Template
Page content

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.

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 tag.

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

Text

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

Text

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.