using different font weight of the same google font in css
<p>So I'm looking at this Google font called Roboto</p>

<p><a href="https://fonts.google.com/specimen/Roboto?selection.family=Roboto" rel="nofollow noreferrer">https://fonts.google.com/specimen/Roboto?selection.family=Roboto</a></p>

<p>It comes in different styles such as light, regular, medium, etc.</p>

<p>The site says to import you can do</p>

<pre><code>@import url('https://fonts.googleapis.com/css?family=Roboto');
</code></pre>

<p>and then in your style sheet you can do:</p>

<pre><code>font-family: 'Roboto', sans-serif;
</code></pre>

<p>Well, thats fine, but I need a mixture of them. Such as light, and regular, not just one.</p>

<p>So I can do</p>

<pre><code>@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
</code></pre>

<p>and this selects them all.</p>

<p>But it still says in the style sheet you can do:</p>

<pre><code>font-family: 'Roboto', sans-serif
</code></pre>

<p>If you do that, then it just sticks to the first one. I need one style to be 300, one to 400, one to be 500. So  how do I specify which one in the css?</p>

<p>I've tried doing</p>

<pre><code>font-family: 'Roboto:300', sans-serif
</code></pre>

<p>and </p>

<pre><code>font-family: 'Roboto 300', sans-serif
</code></pre>

<p>and 
<code>font-family: 'Roboto-300', sans-serif</code></p>

<p>but none of them worked. Can anyone help?</p>