Home
Resources | Scripts | Themes | Tutorials | Web Hosting | Marketplaces | Affiliate Programs | Top Lists | More | Services | E-Commerce | Jobs

CSS Web Fonts

By SamK
0
0 recommends
Category(s)
Web Design
Web Development
Topic(s)
CSS

CSS Web fonts enable designers to import and use fonts that aren't installed on the user's device.

You just need to upload the font file to your web server and define it in your CSS. Then, it will be automatically downloaded to the user's device as needed.

You can define your custom fonts using the CSS @font-face rule.

Font Formats

There are various font formats:

  • TrueType Fonts (TTF): It is the most widely used font format for both Mac OS and Microsoft Windows operating systems.
  • OpenType Fonts (OTF): OpenType is a scalable font format and is widely used across major computer platforms today.
  • The Web Open Font Format (WOFF): WOFF (Web Open Font Format) is a font format designed specifically for use on web pages and it is now a W3C Recommendation.
  • The Web Open Font Format (WOFF 2.0): TrueType/OpenType font that provides better compression than WOFF 1.0.
  • SVG Fonts/Shapes: SVG fonts enable the use of SVG images as glyphs for displaying text. CSS can also be applied to SVG documents, including the use of the @font-face rule for text within SVGs.
  • Embedded OpenType Fonts (EOT): EOT (Embedded OpenType) fonts are a compressed version of OpenType fonts, developed by Microsoft specifically for embedding fonts in web pages.

How to Use

In the @font-face rule in CSS, you first assign a name to the font in the font-family property and then specify the path to the font file.

Always use lowercase letters for the font URL, because using uppercase letters can cause unexpected issues in Internet Explorer.

@font-face {
  font-family: FontName;
  src: url(font_name.woff);
}
p {
  font-family: FontName;
}

Specifying Font Properties

You can specify different font properties in multiple @font-face rules for the same font. The browser will then automatically use the suitable font file for the specified HTML element according to those property values.

For example, if you have a bold font:

@font-face {
 font-family: FontName;
 src: url(font_name_bold.woff);
 font-weight: bold;
}

If you have an Italic font:

@font-face {
 font-family: FontName;
 src: url(font_name_italic.woff);
 font-style: italic;
}

The above mentioned files are separate font files that contain the bold and italic characters respectively for the FontName font.

Browsers will automatically use these files whenever text with the font-family FontName needs to be rendered in bold or italics.

Questions & Answers