Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

The CSS @font-face Rule

10 minutes

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

The CSS @font-face Rule

Once you’ve located or purchased the desired font, simply upload the font file to your web server. It will then be fetched automatically by the user’s browser when required.

Your custom fonts are specified using the CSS @font-face rule.

Different Font Formats

TrueType Fonts (TTF): TrueType, co-developed by Apple and Microsoft in the late 1980s, is the predominant font format for both Mac OS and Microsoft Windows operating systems.

OpenType Fonts (OTF): Built on TrueType, OpenType is a format for scalable computer fonts and is a registered trademark of Microsoft. It’s widely used across major computer platforms today.

Web Open Font Format (WOFF): WOFF, established in 2009 and now a W3C Recommendation, is a font format designed for web pages. It incorporates compression and additional metadata, aiming to facilitate font distribution from servers to clients over bandwidth-restricted networks.

Web Open Font Format (WOFF 2.0): An evolution of WOFF 1.0, WOFF 2.0 is a TrueType/OpenType font format offering enhanced compression.

SVG Fonts/Shapes: SVG fonts allow SVG to serve as glyphs for displaying text. The SVG 1.1 specification includes a font module enabling font creation within an SVG document. Additionally, CSS can be applied to SVG documents, and the @font-face rule can be utilized for text in SVG.

Embedded OpenType Fonts (EOT): EOT fonts, a compact variant of OpenType fonts developed by Microsoft, are intended for use as embedded fonts on web pages.

Browser Support for Font Formats

The numbers in the table indicate the initial browser version that provides complete support for the font format.

*For Internet Explorer, the font format functions exclusively when configured as “installable”.

Using The Font You Want

In the @font-face rule, initially designate a name for the font (e.g., myFirstFont), followed by specifying the file path to the font.

Tip: When specifying the font URL, it’s advisable to consistently use lowercase letters. Using uppercase letters may yield unexpected outcomes in Internet Explorer.

To apply the font to an HTML element, utilize the font-family property and reference the font name (myFirstFont).

Example

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div {
font-family: myFirstFont;
}

Using Bold Text

An additional @font-face rule is required, containing descriptors for bold text.

Example

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

The file “sansation_bold.woff” is a font file that includes the bold characters for the Sansation font.

Browsers will use this file whenever text with the font-family “myFirstFont” needs to be displayed in bold.

This approach allows you to have multiple @font-face rules for the same font.