CODEWITHSUNDEEP
cssfonts
MyDaftQuestions
MyDaftQuestions

Reputation: 4701

Can we use Google Fonts when embedded in the same way as when we import

When we import a font from Google we can use the following to reference it

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

In this example you can see I'm using a font with 4 font weights

I now want to embed the fonts so I can use them locally. Within google-fonts I can download them but this means I download multiple fonts.

Where as previously I could do 

.myCss {
    font-family:myGoogleFont;
    font-weight:700;
}

Can I achieve the same when I embed the fonts or do I have to do:

@font-face {
    font-family: myRegularFont;
    src: url(myGoogleFont-Regular.tff);
}

@font-face {
    font-family: my300Font;
    src: url(myGoogleFont-300.tff);
}

@font-face {
    font-family: my400Font;
    src: url(myGoogleFont-400.tff);
}

etc

Upvotes: 0

Views: 58

Answers (1)

l3fty
l3fty

Reputation: 584

You can do something like the following:

// Normal
@font-face {
    font-family: myRegularFont;
    font-style: normal;
    font-weight: 400; // 400 is considered normal
    src: url(myGoogleFont-Regular.tff);
}
// Thin
@font-face {
    font-family: myRegularFont;
    font-style: normal;
    font-weight: 300;
    src: url(myGoogleFont-300.tff);
}
// Semi-bold
@font-face {
    font-family: myRegularFont;
    font-style: normal;
    font-weight: 500;
    src: url(myGoogleFont-500.tff);
}
// Italic
@font-face {
    font-family: myRegularFont;
    font-style: italic;
    font-weight: 400;
    src: url(myGoogleFont-italic.tff);
}

Upvotes: 1

Related Questions