CODEWITHSUNDEEP
css
S. Shukla
S. Shukla

Reputation: 11

Use a fallback font when using the Google Fonts CDN

Can I use web fonts and Google Fonts API both (if user has the google fonts CDN blocked)? Namely,

@font-face {
    font-family: "SourceCodePro-Bold";
    src: url(../fonts/SourceCodePro-Bold.ttf);
}

h1{ font-family: "SourceCodePro-Bold";}

and

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,400italic' rel='stylesheet' type='text/css'>

Upvotes: 1

Views: 712

Answers (1)

noahnu
noahnu

Reputation: 3574

Same as any font-family fallback. Use a comma separated list of the fonts for font-family.

Make sure your local fonts don't have the same name as the Google fonts.

<link rel='stylesheet' href='http://fonts.googleapis.com/...' />

<style type='text/css'>
* {
    font-family: 'Google Font', 'back up local', sans-serif;
}
</style>

Upvotes: 3

Related Questions