CodePen

HTML

            
              <div class="warning">
  This demo doesn't work in Firefox because I'm loading the fonts from a different domain. The technique works just fine if you're loading your fonts from the same domain. 
</div>

<div class="container">
  <h1>Heading Level One</h1>
  <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <strong>eiusmod</strong> tempor incididunt ut labore et dolore magna aliqua. <em class="light">Ut enim ad minim veniam</em>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h2>Heading Level Two</h2>
  <p class="regular">Lorem ipsum <em>dolor sit amet</em>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <strong>dolore</strong> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h3>Heading Level Three</h3>
  <p class="bold">Lorem ipsum dolor sit amet, <em class="bold">consectetur</em> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
            
          
!

CSS

            
              /* Fool-proof @font-face */
/* Based on http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/ */

@mixin font-face($font-family, $file-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.ttf') format('truetype'),
           url('#{$file-path}.svg##{$font-family}') format('svg');
    font-weight: $font-weight;
    font-style: $font-style;
  }
  // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
      font-family: $font-family;
        src: url('#{$file-path}.svg##{$font-family}') format('svg');
    }
  }
}

@include font-face(Ubuntu-Light, 'https://dl.dropbox.com/u/1220078/ubuntu-new/Ubuntu-Light-webfont', 300, normal);
@include font-face(Ubuntu-Light-Italic, 'https://dl.dropbox.com/u/1220078/ubuntu-new/Ubuntu-Light-Italic-webfont', 300, italic);
@include font-face(Ubuntu-Regular, 'https://dl.dropbox.com/u/1220078/ubuntu-new/Ubuntu-Regular-webfont', 400, normal);
@include font-face(Ubuntu-Regular-Italic, 'https://dl.dropbox.com/u/1220078/ubuntu-new/Ubuntu-Regular-Italic-webfont', 400, italic);
@include font-face(Ubuntu-Bold, 'https://dl.dropbox.com/u/1220078/ubuntu-new/Ubuntu-Bold-webfont', 700, normal);
@include font-face(Ubuntu-Bold-Italic, 'https://dl.dropbox.com/u/1220078/ubuntu-new/Ubuntu-Bold-Italic-webfont', 700, italic);

@mixin Ubuntu-Light {
  font-family: 'Ubuntu-Light', arial, sans-serif;
  font-weight: 300; font-style: normal; }

@mixin Ubuntu-Light-Italic {
  font-family: 'Ubuntu-Light-Italic', arial, sans-serif;
  font-weight: 300; font-style: italic; }

@mixin Ubuntu-Regular {
  font-family: 'Ubuntu-Regular', arial, sans-serif;
  font-weight: 400; font-style: normal; }

@mixin Ubuntu-Regular-Italic {
  font-family: 'Ubuntu-Regular-Italic', arial, sans-serif;
  font-weight: 400; font-style: italic; }

@mixin Ubuntu-Bold {
  font-family: 'Ubuntu-Bold', arial, sans-serif;
  font-weight: 700; font-style: normal; }

@mixin Ubuntu-Bold-Italic {
  font-family: 'Ubuntu-Bold-Italic', arial, sans-serif;
  font-weight: 700; font-style: italic; }

/* Demo Styles */
/* =============================================================================================== */

body {
  @include Ubuntu-Regular;
  font-size: 100%;
  line-height: 1.4; }

.container { 
  width: 40%;
  margin: 0 auto; }

h1, h2, h3 {
  @include Ubuntu-Bold;
  margin: 0; }

h1 {
  font-size: 2em; }

h2 {
  font-size: 1.6em; }

h3 {
  font-size: 1.2em; }

p {
  margin: 0 0 1em 0; }

strong {
  @include Ubuntu-Bold; }

em {
  @include Ubuntu-Regular-Italic; }

p.light {
  @include Ubuntu-Light;
  em { @include Ubuntu-Light-Italic; }
}

p.bold {
  @include Ubuntu-Bold;
  em { @include Ubuntu-Bold-Italic; }
}

.warning {
  border: 1px solid #CC0000;
  border-radius: 2px;
  background-color: rgba(#CC0000, 0.1);
  color: #CC0000;
  font-size: 0.75em;
  display: none;
  padding: 0.25em;
  width: 40%;
  margin: 1em auto;
}

@-moz-document url-prefix() {
  .warning {
    display: block;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................