Pro HTML5 and CSS3 Design Patterns

CHAPTER 10 ■ STYLING TEXT

Font Embedding

Problem You want the web page to directly download a font file from the server to the user’s
computer and use it to render some text.

Solution Upload your font file to your server, assign a unique ID to the block containing the text you
want to style, and use the @font-face attribute:
position:relative; positions the block so the background image of the can be
positioned on top of the text.

width and height size the block to fit the image.

padding:0; removes padding that could allow text to show through.

overflow:hidden; ensures that long text doesn’t show through, but be aware that if the

image isn’t displayed, long text could be truncated.

Insert an empty <span> into the block, and style it as follows:

position:absolute;, left:0;, and top:0; position the image over the text in the block.

width and height size the <span> to fit the image.

margin:0; removes margins that could allow text to show through.

background-image:url("FILE.EXT") loads the image.

background-repeat:no-repeat ensures that the image doesn’t repeat.

Pattern^

HTML TEXT ^

CSS @font-face { font-family: FONT-NAME; src: url(URL) format (FORMAT);}
#ID { font-family: FONT-NAME }

Location This pattern applies to any block, float, absolute, or fixed element.

Tips The embedded font's license must allow it to be embedded using @font-face.

Limitations Internet Explorer only works with EOT font files.

Related to Text Replacement with Image, Text Replacement with canvas and VML