CSS Font Face Example: TTF, OTF, WOFF

CSS provides a lot of properties for adding new fonts to stylesheets and customizing them. One of these properties is css font face. It allows to use custom fonts without importing them from external sources such as Google Fonts.

In this article, we will discuss the CSS Font Face properties, mostly used in situations where the font you want to use isn’t available on the user’s device or external sources with examples.

How to Use CSS Font-Face

To use CSS Font-Face, you’ll need to follow a few steps:

Find or create a font file
Include the font file to your Development Folder
Define the font in your CSS using the @font-face rule

Finding or Creating a Font File

First, you’ll need to find or create a font file. There are a lot of paid or free font sources, you can downland it for using in your project. On of the popular website to fonts: Google Fonts
Uploading the Font File

Once you have your font file, you’ll need to upload it to your web server, which means include it your development folder so that you can access them.

Defining the Font in CSS

Now that your font file is uploaded, you can define the font in your CSS using the @font-face rule. Here’s an example:

@font-face {
  font-family: 'My Custom Font';
  src: url('path/to/my/custom/font.ttf');
}

In this example, we’ve defined a custom font called “My Custom Font” and specified the path to the font file.

Once you’ve defined your font using @font-face, you can use it in your CSS just like any other font:

body {
  font-family: 'My Custom Font', sans-serif;
}

Font Formats and Browser Support

There are different types of font with different extensions including:

TrueType (ttf): This is a font format developed by Apple and Microsoft that is widely used on both Mac and Windows operating systems.
OpenType (otf): This is a newer font format that was developed by Microsoft and Adobe. OpenType fonts can contain more advanced typography features than TrueType fonts, such as ligatures and alternate glyphs.
Web Open Font Format (woff and woff2): These are font formats that were specifically designed for use on the web. They use compression to reduce file size and improve loading times.
Embedded OpenType (eot): This is a font format that was developed by Microsoft specifically for use with Internet Explorer. It is similar to TrueType, but includes digital rights management features to prevent unauthorized use of the font.

It’s important to note that different browsers support different font formats. To ensure the best possible compatibility, it’s recommended to provide multiple font formats using the src property. Here’s an example:

@font-face {
  font-family: 'My Custom Font';
  src: url('path/to/my/custom/font.woff2') format('woff2'),
       url('path/to/my/custom/font.woff') format('woff'),
       url('path/to/my/custom/font.ttf') format('truetype');
}

In this example, we’ve provided three different font formats: WOFF2, WOFF and TTF. By providing multiple formats, we increase the likelihood that the font will be displayed correctly on different browsers and devices.

Different Weight Fonts

In CSS Font-Face, you can define different variations of a font such as italic, bold, etc using font-weight and font-style properties. Here’s an example:

@font-face {
  font-family: 'My Custom Font';
  src: url('path/to/my/custom/font.woff2') format('woff2'),
       url('path/to/my/custom/font.woff') format('woff'),
       url('path/to/my/custom/font.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
}

@font-face {
  font-family: 'My Custom Font';
  src: url('path/to/my/custom/font-bold.woff2') format('woff2'),
       url('path/to/my/custom/font-bold.woff') format('woff'),
       url('path/to/my/custom/font-bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
}

@font-face {
  font-family: 'My Custom Font';
  src: url('path/to/my/custom/font-italic.woff2') format('woff2'),
       url('path/to/my/custom/font-italic.woff') format('woff'),
       url('path/to/my/custom/font-italic.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: italic;
}

body {
  font-family: 'My Custom Font', sans-serif;
  font-weight: 400; /* Regular */
}

h1 {
  font-weight: 700; /* Bold */
}

a {
  font-style: italic;
}

In this example, we’ve defined three different variations of the font “My Custom Font”: regular, bold and italic. We’ve specified the font-weight and font-style properties for each variation, which allows us to use them in our CSS just like any other font.

Font Face With SCSS

SCSS enhances the @font-face rule by allowing you to define fonts in a more structured manner. By using SCSS variables and mixins, you can simplify the process of declaring custom fonts. Let’s take a look at an example:

$font-path: 'path/to/';

@mixin font-face($font-family, $font-file, $font-weight: normal, $font-style: normal) {
  @font-face {
    font-family: '#{$font-family}';
    src: url('#{$font-path}#{$font-file}.woff2') format('woff2'),
         url('#{$font-path}#{$font-file}.woff') format('woff'),
         url('#{$font-path}#{$font-file}.ttf') format('truetype');
    font-weight: $font-weight;
    font-style: $font-style;
  }
}

@include font-face('CustomFont', 'font', normal, normal);

In this SCSS example, we define a mixin called font-face that encapsulates the @font-face declaration. It takes four parameters: font-family, font-file, font-weight, and font-style. The mixin then generates the necessary CSS code for the @font-face rule.

Conclusion

CSS Font Face is a powerful tool for web designers and developers. By using @font-face, we can include custom fonts on our web pages, regardless of whether or not they’re installed on the user’s device. With a little bit of setup in CSS, you can include it your projects.