Embedded Fonts - AH218

Embedded Font Demo

Here's another custom font

Fortunately, CSS3 supports a sensible solution for providing downloadable fonts, called @font-face.

convert to whatever font format you prefer

It defines a new CSS value that can be used in other markup. Specifically, it allows you to place a font file on your server and define a font family using that font.

Looking at Open Font Library (http://openfontlibrary.org/). Google Fonts (www.google.com/fonts/) is another great resource for free fonts. With the Google Font tool, you can select a font embedded on Google's servers, and you can copy code that makes the font available without downloading.

This is xx-small > The quick brown fox jumps over the lazy dog.

This is x-small > The quick brown fox jumps over the lazy dog.

This is small > The quick brown fox jumps over the lazy dog.

This is normal > The quick brown fox jumps over the lazy dog.

This is medium > The quick brown fox jumps over the lazy dog.

This is large > The quick brown fox jumps over the lazy dog.

This is x-large > The quick brown fox jumps over the lazy dog.

This is xx-large > The quick brown fox jumps over the lazy dog.

Unfortunately, points aren't an effective unit of measure for web pages. Points are an absolute scale, useful for print, but they aren't reliable on the web because you don't know what resolution the user's screen has.

The user sets the default font size in the browser (or leaves it alone), and all other font sizes should be in relation to this preset size.

p {
font-size: 150%;
}

Em (em)
In traditional typesetting, the em is a unit of measurement equivalent to the width of the “m” character in that font. In actual web use, it's really another way of specifying the relative size of a font. For instance, 0.5 ems is half the normal size, and 3 ems is three times the normal size

p {
font-size: 1.5em;
}

The size defined in the body is applied to every element in the body automatically.

Other text attributes

  1. Font-variant like small-caps
  2. letter-spacing often uses em
  3. word-spacing
  4. text-indent for the first line
  5. vertical-align
  6. text-transform uppercase to lowercase and vice-versa
  7. line-height

This paragraph uses the font rule which is specifed in the style section. Color does not work here.

A2 + B2 = C2

i0 = 0

2 vertical spaces