How to use different fonts in same name - html

Question

I'm having some problems in using fonts
i need to use "Raleway Thin" and "Raleway" font for my webpage and both names are Raleway.
when i type font-family:"raleway Thin","sans sherif"; it does nothing.
what is the best solution for this?
here is the font

Answer 1

Raleway Thin is the 100 weight of the "Raleway" font. Select the normal weight and 100 weight from google fonts, use "Raleway" as the font name wherever you want to use it, and use font-weight: 100; where you want to use "thin". You can also assign the font weight to a class, like .thin, and use the class wherever you want to use the thin font.
h1,h2,.thin {
font-family: Raleway,sans-serif;
}
h2,.thin {
font-weight: 100;
}
<link href="https://fonts.googleapis.com/css?family=Raleway:100,400" rel="stylesheet">
<h1>raleway</h1>
<h2>raleway thin</h2>
<h3 class="thin">also raleway thin</h3>

Answer 2

This is the best way use google font:
body {
font-family: 'Raleway', sans-serif;
font-weight: 400;/* Normal Font */
}
h1{
font-weight: 100;/* Thin Font */
}
h2{
font-weight: 200;/* Extra Light Font */
}
h3{
font-weight: 300;/* Light Font */
}
h4{
font-weight: 500;/* Medium Font */
}
h5{
font-weight: 600;/* Semi Bold Font */
}
h6{
font-weight: 700;/* Bold Font */
}
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<h1>test</h1>
<h2>test</h2>
<h3>test</h3>
<h4>test</h4>
<h5>test</h5>
<h6>test</h6>
you can used like that 800,900.

Answer 3

#import url('https://fonts.googleapis.com/css?family=Raleway:100,600');
*{
font-size:30px;
}
.thin{
font-family:Raleway;
font-weight:100;
}
.bold{
font-family:Raleway;
font-weight:600;
}
<div>
<span class="thin">Hello</span>
<span class="bold">World!</span>
</div>
JSFIDDLE