Fonts
written by: admin
Date Written: 12/8/06
Last Updated: 9/10/12
Websites can use several different fonts, but not all are supported on all browsers. When a website uses a font that is not installed on a visitor's computer the browser will show one of the default fonts instead. For example in the following code sample the visitor's computer will check to see if
Lucida Calligraphy is available and will use that. If it is not available on the user's browser then it will check the next font-family font:
Helvetica and if that is not available then the next font-family listed will be checked and if none of them are available then a default font will be used.
<div style='font-family: "Lucida Calligraphy", Helvetica, sans-serif'>This is Sample text.</div>
These font-families can also be over ridden by changing the settings in your browser.
When looking at fonts in the different browsers Firefox seems to recognize the fewest and Opera the most. The fonts are virtually identical in design, but in Internet Explorer they look more refined as if a lot more work went into making the font look professional. This is just a personal opinion at present, but take a look for yourself and you can see the difference.
Monospace Fonts
The default font used when none is specified seems to be a version of
monospace. The useful thing about monospaced fonts is that they use fixed width fonts, which can make formatting code a lot nicer and cleaner and more readable.
The equal signs in the first example below are not aligned:
$story = this
$comments = this
$genre = this
It is actually difficult to get them perfectly aligned unless you use a monospace font as is shown in the second example below:
$story = this
$comments = this
$genre = this
CSS Syntax
- The correct syntax looks like this: font-family: Tunga;
- If the font name has more than one word or has any non-word character the name needs to be placed in quotes: font-family:"Times New Roman";
- The names are not case sensitive, so font-family:"Times new Roman"; will work, but font-family:"Times new Roman"; will not work because there are two spaces between "New" and "Roman."
- The best practice when declaring a font family is to list 3 family names separated by a comma like so: font-family: Gill, Helvetica, sans-serif; The first family name is the one you most want viewers to see. If that is not available on the user's browser then it will default to the second one listed and finally to the last family if the second is not found either. The second and third font family should be one that is more widely accepted, like fantasy, monospace, serif, sans-serif, or cursive.
font-family:Lucida Calligraphy;
To view the different fonts available in Opera go to Settings
--> Preferences
--> Web Pages
--> click on the normal font or monospace font for lists of all the available fonts.
Trivia: the largest font size allowed by the Opera browser is 10239px.
Altering current font
You can alter certain aspects of the current font.
letter-spacing:1px; or
letter-spacing:-1px; will either add 1 px or reduce by 1 px the distance between characters.
ref
see also
line-height
word-spacing
The following will allow you to move a word up or down relative to the line that it is on without affecting the surrounding text:
<body>
This <sub class="that_word">→</sub> word.
<br>here is some more text.
</body>
<style ="text/css">
.that_word {
color: orange;
font-family: Arial, Times, Serif;
position: relative;
top:-5px;
font-size:24px;
font-weight:bold;
}
body{background-color:blue;
color:white;}
</style>
This will give you something like:
This → word.
here is some more text.
The reason the third line is displaced somewhat is due to the increased font-size of the arrow.
Using Custom Fonts
After the font files have been uploaded to your site you can access them with the following script. It works in Firefox, Internet Explorer, and Opera.
<style type="text/css">
@font-face {
font-family: cool_font;
src: url("angelicwar-webfont.ttf");
src: url("angelicwar-webfont.eot");
src: local(cool_font), url("angelicwar-webfont.ttf");
}
p.custom_font{
font-family: cool_font;
font-size:52px;
}
</style>
<p class="custom_font">jgahskd</p>
From what I can tell quotes do not really matter for the name of the font unless there is a space involved. I used quotes for the location of the fonts. eot is used for internet explorer. The location of the font can be absolute or relative. The font format does not seem to need to be specified either.
Firefox may have some troubles with a select few fonts. This seems to be the fault of Firefox for not recognizing certain older or corrupted fonts and the fonts themselves being older or corrupted somehow. This is mostly an educated guess though.
Links
TAGS: css,
fonts