Changing Font Color, Size and Face
Editing the template font css code
Colors, sizes, line-height and the font face in all Allwebco templates are controlled by the .css files. The global css file may be named "style.css", "coolstyle.css" or "corporatestyle.css". In color theme templates the css files will be in your "colors" folder. You can edit css files in Notepad, TextEdit or a plain text editor.
Changes you make in the .css file will globally affect every webpage.
Changes you make in the .css file will globally affect every webpage.
Default page text font
Allwebco templates define the default font used in the body of the HTML pages using one of the three following lines of code or variations of "table, div, body" css code. Code will be near the top of your css file.
Edit the code following this note:
/* THE NEXT LINE CONTROLS THE DEFAULT FONT SIZE */
body, div, table { color: #000000; font: 12px arial, sans-serif; }
...or...
body { color: #000000; font: 12px arial, sans-serif; }
...or...
table { color: #000000; font: 12px arial, sans-serif; }
In the above 3 examples, all text within a table, div or the body respectively will use the font sizes as defined in the code. These are called "type" selectors.
Title and subtitle classes
Css code for template titles will be the following:
.title { color: #000000; font: 18px arial, sans-serif; font-weight: bold; }
.subtitle { color: #FF3300; font: 15px arial, sans-serif; font-weight: bold; }
.phonetitle { color: #000000; font: 18px arial, sans-serif; font-weight: bold; }
The above lines globally control the fonts for the entire template. You can freely experiment with other sizes and colors. These are called "class" selectors. See section below if your template includes Flash animation.
Menu fonts
The menu fonts may be defined in a menu.css file or they may be at the bottom of the style.css. See the "help.html" included with your template download.
Other template fonts and colors
Fonts for all elements will be defined with classes in the css file(s). Each css file includes notes in each section to indicate what that css code group is being used for.
Google fonts
Some templates use Google fonts. These fonts are inserted as the first line in the style.css file. See Google Fonts.
About css "line-height" line spacing
Line-height is CSS code that is used to determine how high the actual space for text should be per line. If you want more space between text lines on a template page, you can edit ,or add this code if it is not included. The code will be similar to the following in the template CSS file(s):
div, table, body { color: #000000; font: 12px arial, sans-serif; line-height: 18px; }
...or...
body, div, table { color: #000000; font-family: "Open Sans", arial, sans-serif;
font-size: 14px; font-weight: normal; line-height: 150%; }
Line-height can be added to any type of text in your CSS file.
About "web safe" fonts
Although any font can be specified in the CSS files for the text in a template, if your visitor does not have that font installed on their computer, the website will not display webpages with that font face. In this case, the next font in the list defined by the CSS code will be displayed, i.e. "arial, verdana, sans-serif".
Fonts that are considered "web safe" include:
The Sans-serif family
Arial, Verdana, Geneva, Helvetica, sans-serif
The Serif family
Georgia, Times New Roman, Times, serif
The Monospace family
Courier New, Courier, monospace
To use non web safe fonts that will work on all computers see Google Fonts.
Also try some searches at Google for "CSS web safe fonts".
Flash fonts
See Flash animation for details on editing the Flash header or animation fonts.
Related Topics:
Changing Link Colors
Adding New Font Styles
Editing the Flash Animation
Adding a Second Link Class (advanced)