Use Roboto Condensed with @font-face CSS rule

Cascading Style Sheet

@font-face is a very useful CSS rule that allows you to include fonts directly in your project, without the need to find them installed on the user’s machine. This greatly enlarges the number of fonts you can use in your projects and is very handy if all font styles are included in one single file. But what if every style is in a stand-alone file? At a first glance this could be a problem. Today we are going to find out how to use the @font-face rule to define a single font-family, while adding multiple files, one for every font style.

Roboto Condensed

We are going to use Roboto Condensed as an example. You can download the ttf files from Google Fonts. Be sure to check all styles!

Define the CSS @font-face property

Now that you’ve downloaded the font files, we’re ready to go ahead and write the CSS code necessary for our purpose. Create this file in the same directory where you put the font files and call it whatever you want.
First of all, let me make a note here: we could define different font-family names for every style, but then we’d have to apply those to every element like <em>, <i>, <strong>, <b>, and so on. Not very handy.

Let’s go deeper with our analysis. What we have here is three font weights (light, regular, bold), each one with two font styles (normal and italic). So we need six @font-face rules. This rules must differ in some properties. We already said that we want that all those fonts have the same font-family property and we’re going to call it “Roboto Condensed” (yeah, an original name). We’ll handle the weights with the font-weight property, which will have the three different values stated before, expressed in numbers: 300 (light), 400 (regular), 700 (bold). The styles are defined by the font-style property, which will have two values: normal and italic.

Now it’s time to write the CSS code for our Roboto Condensed Regular:

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url("RobotoCondensed-Regular.ttf") format('truetype');
}

Let’s explain the last property: src. This property’s task is to load the font file, which is done by its url value (that defines the relative path to the file). I added the format value to inform the browser about the format of the font file to load.

What about those local values? They’re not required, but very useful: if the user’s machine has a font with the name written between the brackets, the browser will load it directly from the client computer instead of downloading it from the server. This obviously saves bandwidth and shortens the time needed to load the web page.

Now that we now how it works, it’s very easy to go through all the other font styles and weight simply by changing values to the corresponding properties. Obviously we have to change value to the src property too.

The result is as follows. Feel free to download the gist and customize it.

Creative Commons License
Use Roboto Condensed with @font-face CSS rule by Mattia Migliorini, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Mattia “deshack” Migliorini

Web Designer freelance, Ubuntu Member, Linux evangelist. Loves working on clear and minimal designs and wants to create beautiful things for different devices.

Mattia “deshack” Migliorini wrote 40 posts

Post navigation


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>