Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

font face

The CSS @font-face rule is used to embed custom fonts into a document. It does not matter if the font is installed on the visitor's computer or not, all visitors will see the intended font because it is embedded into the document. The font file becomes an extra resource that the server needs to fetch so it does create extra overhead when the document loads, but embedding a cool unique font might give your design the edge it needs.

Code Example

<style> @font-face { font-family: aFont; /* name your custom font */ src: url("fonts/aFont.woff"); /* point to the font file */ } .myfontclass { /* apply it to any selector(s) */ font-family: aFont, Arial, Helvetica, sans-serif; } </style> <h2 class="myfontclass">Custom Web Page Font</h2> <p>Standard Web Page Font</p>

We have a video tutorial covering this feature a little bit more in depth: Embed Custom Font HTML Tutorial Special Website Text

Module

Fonts Module

Official Documentation

http://www.w3.org/TR/css3-fonts/#font-face-rule

CSS

At Rules

charsetcounter styledocumentfont facefont feature valuesimportkeyframesmedianamespacesupports