As budding web designers, it is our goal to create web pages that are both functional and aesthetically pleasing. Pages that display above par aesthetics are memorable and invite the viewer to linger. There are many ways to achieve this difference. One way is to use non-standard fonts. This tutorial will explain how to write different fonts into your html code, the danger of non-standard fonts, and how to circumvent that danger.
For information not covered in this tutorial, the budding web designer can acquire knowledge from various free online tutorials, instruction manuals, and HTML classes.
How to Write Fonts into Your Code with CSS
The standard font for you webpage will be Times New Roman as a default. There are many different ways to change your webpages fonts. I will focus on two possibilities: one version of in-text font change and an embedded style sheet.
In-text
In text font changes can be used to change the text of entire sections or targeted words and sentences.
- Before the section that you want to change you insert the phrase <font face= Font Name> in front of the text that you want to change.
- You need to remember to end the command by typing </font>. If you fail to end the command, the font will either fail to work or change your entire document to the new font.
<style type= "text/css">
body {
font-family: san-serif;
}
Embedded Style Sheet
The second way that you can change the font is by embedding a CSS style sheet into your HTML Code. A CSS style sheet allows you to create an overarching font change for each element inside your document. The embedded style sheet is placed in the <head> section.
- You begin the style sheet by typing <style sheet= “text/css”>.
- Next you clarify what element you want to change. This can be body, H1, p, or any other element that you use to separate sections of your webpage.
- After the element is clarified you insert a curly brace ({).
- Type “font-family: Font NAME” to clarify what you are changing and the font you want to change it to.
- End the command with another curly brace (})
- Repeat this process for every element. Remember to end your embedded style sheet with </style>.
Your html code should look like this:
<body> <p><font face=sans-serif> This is an in-text font change </font></p> <body>
You should remember that lower elements take precedence. That is to say that if you choose Times New Roman for your body element and Georgia for your H1 element. H1 will take precedence over the broader body command.
The Dangers of Non-Standard Fonts
As zesty as new fonts can be, you should check that you are using a font that can be seen on all browsers. Fonts fall into four different categories. Each category is not readable by all browsers.
- OpenType (OTF) and TrueType (TTF) are fonts chosen by most design teams due to the fact that it is supported by most browsers. OTF and TTF can be used on all platforms besides iOS.
- SVG is readable only by Apple’s IPod’s. SVG supports Firefox 3.5, Chrome 0.3, Safari 3.1, Opera 9, iOS1.
- Web Open Font Format (WOFF) is readable by Chrome 5, Firefox 6, and Internet Explorer 9.
- Embedded OpenType (EOT) is only readable by Internet Explorer 5+.
If you are unsure if the font is readable across all browsers, you should check how your webpage looks using as many browsers and devices as possible. If you find that your text isn’t showing up on one of the browsers, you will need to make a change to you HTML code.
How to Deal with Font Problems
If you have discovered that your chosen font is not supported by one of the browsers, you will not need to scrap your chosen font. Instead you will need to create a list of back-up fonts.
- You should return to the style sheet of your document.
- Add other font names after your chosen name. All the fonts should be separated by commas.
Setting Up Your Style Sheet to Show Up on All Browsers.
<style type= "text/css">
body {
font-family: san-serif, Georgia, "Times New Roman"
}
Setting Up In-Text Fonts to Show Up on All Browsers.
<body> <p><font face=sans-serif, Georgia, "Times New Roman"> This is an in-text font change </font></p> <body>
This will create a cascade affect. When a browser reads your document it will choose the first font that it supports starting from the left. You should always end your font possibility list with a very common font like Georgia or Times New Roman. If you fear that you do not have interesting fonts that will work on all browsers, you should check out Font Squirrel. Font Squirrel allows you to download fonts to use on your webpages for free.
