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.
