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.

Don't be shellfish...Share on Google+1Tweet about this on Twitter0Share on Facebook3Share on LinkedIn1Email this to someone

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 44 posts

Post navigation


Comments

  • Lucia

    CCS code on the ecommerce template uses primarily Roboto. Font on site is too dark, small and thick (condensed). How do I change this so the font is more clean and open? Example of really ugly page is Help / FAQ in the reference left nav menu.
    CSS code for site:

    @font-face {
    font-family: ‘Curve’;
    src: url(‘../fonts/Curve/LearningCurve_OT-webfont.eot’);
    src: url(‘../fonts/Curve/LearningCurve_OT-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/Curve/LearningCurve_OT-webfont.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘Roboto’;
    src: url(‘../fonts/Roboto/roboto-condensed-reg.eot’);
    src: url(‘../fonts/Roboto/roboto-condensed-reg.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/Roboto/roboto-condensed-reg.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘Roboto’;
    src: url(‘../fonts/Roboto/roboto-condensed-bold.eot’);
    src: url(‘../fonts/Roboto/roboto-condensed-bold.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/Roboto/roboto-condensed-bold.ttf’) format(‘truetype’);
    font-weight: bold;
    font-style: normal;
    }

    @font-face {
    font-family: ‘Roboto’;
    src: url(‘../fonts/Roboto/roboto-condensed-italic.eot’);
    src: url(‘../fonts/Roboto/roboto-condensed-italic.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/Roboto/roboto-condensed-italic.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: italic;
    }

    @font-face {
    font-family: ‘Roboto’;
    src: url(‘../fonts/Roboto/roboto-condensed-bolditalic.eot’);
    src: url(‘../fonts/Roboto/roboto-condensed-bolditalic.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/Roboto/roboto-condensed-bolditalic.ttf’) format(‘truetype’);
    font-weight: bold;
    font-style: italic;
    }

    @font-face {
    font-family: ‘League’;
    src: url(‘../fonts/League/leaguegothic-reg.eot’);
    src: url(‘../fonts/League/leaguegothic-reg.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/League/leaguegothic-reg.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘League’;
    src: url(‘../fonts/League/leaguegothic-regitalic.eot’);
    src: url(‘../fonts/League/leaguegothic-regitalic.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/League/leaguegothic-regitalic.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: italic;
    }

    body {
    background: #ffffff url(‘../images/template/body-bg.jpg’) repeat center top;
    color: #4e4b45;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow-y: scroll;
    }

    • deshack

      Well, condensed fonts are not a good choice for content, but only for titles. You could use Roboto instead of Roboto Condensed in the same way explained in this guide. Also consider loading your fonts directly from Google Fonts if your site always runs online. This is the easier and faster way to load fonts for your site.

      And of course you can increase font size with CSS.

  • ashok

    @font-face {
    font-family: ‘Roboto’;
    font-style: normal;
    font-weight: 300;
    src: local(‘Roboto Light’), local(‘Roboto-Light’), url(../fonts/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format(‘woff’);
    }

    i tryed with this format also but its not working, i dont know why its not working could u please help me

  • ashok

    am using roboto font in my website by using @font-face but its not working this is the code am using
    font-family: ‘Roboto’;
    src: url(‘../fonts/Roboto-Regular-webfont.eot’);
    src: url(‘../fonts/Roboto-Regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘../fonts/Roboto-Regular-webfont.woff’) format(‘woff’),
    url(‘../fonts/Roboto-Regular-webfont.ttf’) format(‘truetype’),
    url(‘../fonts/Roboto-Regular-webfont.svg#RobotoRegular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    and these fonts are in my fonts folder

    • deshack

      Where did you place your CSS file?

  • Sang

    Everything is very open with a clear description of the issues.

    It was really informative. Your website is useful.
    Thank you for sharing!

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>