I use the Google Roboto Font on my website but I have a little implementation problem. Google allows us to adjust the font thickness before importing:
The import code for the font with a thickness of 700
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
The import code for the font with a thickness of 300
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
My problem is, that the usage in the CSS isn't depending on the two imports. That means it's always
font-family: 'Roboto', sans-serif;
and I have no choice which of the 2 imported fonts I want to use.
On the CSS-side you have to apply these rules rispectively:
font: normal 300 16px 'Roboto', sans-serif; //thin font
font: normal 700 16px 'Roboto', sans-serif; //bolder font