Google Font @import + @font-face?

Question

I'm trying to import fonts with Google Fonts with @import and @font-face, in my CSS. I used to only use @font-face with downloaded fonts, but since it takes time to load, I preferred to use the Google Fonts method.

I didn't wanted the "bold" version of Roboto as the "bold" font in my website, so I used @font-face. However, I'm not sure of the way to use it. Is this correct to use @import and @font-face like this?

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');

@font-face
{
    font-family: Roboto;
    src: url("https://fonts.googleapis.com/css?family=Roboto:400");
}

@font-face
{
    font-family: Roboto;
    font-weight: bold;
    src: url("https://fonts.googleapis.com/css?family=Roboto:500");
}

@font-face
{
    font-family: Roboto;
    font-style: italic;
    src: url("https://fonts.googleapis.com/css?family=Roboto:400i");
}

@font-face
{
    font-family: Roboto;
    font-weight: bold;
    font-style: italic;
    src: url("https://fonts.googleapis.com/css?family=Roboto:500i");
}

I've the feeling I'm importing the fonts twice... but it doesn't even work! (The page displays the default browser font)

Thank you for reading and taking time to help me.

Answer 1

you can use like this in your stylesheet

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
h2{
font-family:Roboto;
}

Answer 2

@font-face make sense when you loading font from files on your server. If you importing from google, use only import and write right properties to elements you want.

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');

h2 {
   font-family:Roboto;
   font-weight: 500;
}