Question

For a website I’m working on, the client wanted to use Roboto (by Google) as their main font. Several of the elements on the page use different styles of Roboto, such as Roboto Thin of Roboto Light. However, I have used the the @font-face selector to make the browser render the text in Roboto. My problem is that the design requires the use of different weights, not in the standard Roboto text. I’m not sure if I’m being clear enough. If you need clarification or a specific example, please ask.

PS: I found a similar thread about a similar problem, however, they use system fonts in conjuction with their @font-face. Using @fontface, how do I apply different styles to different font-families?

Answer 1

How do You Add Several font-faces to Separate Tags?

@font-face {
    font-family: 'Crystal';
    src: url('../fonts/crystalnormal.eot');
    src: url('../fonts/crystalnormal.eot?#iefix') format('embedded-opentype'),
         url('../fonts/crystalnormal.woff') format('woff'),
         url('../fonts/crystalnormal.ttf') format('truetype'),
         url('../fonts/crystalnormal.svg#crystalnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FreestyleC';
    src: url('../fonts/freestyle.eot');
    src: url('../fonts/freestyle.eot?#iefix') format('embedded-opentype'),
         url('../fonts/freestyle.woff') format('woff'),
         url('../fonts/freestyle.ttf') format('truetype'),
         url('../fonts/freestyle.svg#freestyle') format('svg');
    font-weight: normal;
    font-style: normal;
}

foo {
    font-family:FreestyleC;
}
bar {
    font-family:Crystal;
}