Skip to content

Instantly share code, notes, and snippets.

Last active January 2, 2016 22:49
What would you like to do?
Font import examples
Put all @import rules at the top of your custom CSS.
The first 3 examples below illustrate alternate options. Implement the 1 option that best suits your needs.
For more info on importing Google web fonts, see
/* Example #1 - Load 1 Font In Its Default Weight
This loads the Oswald font but doesn't specify a weight, so its default weight loads.
Specifying the protocol (the HTTPS) is a good idea, and it's better to use a secure protocol.
@import "";
/* Example #2 - Load 1 Font In 2 Weights
This loads the Source Sans Pro font in weights of 300 and 400, so only these weights load.
Note the + that occupies the space between the individual words of the font name.
@import ",400|Roboto+Slab:300,400";
/* Example #3 - Load 2 Fonts In 2 Weights Each
This loads the Source Sans Pro font in weights of 300 and 400, and Roboto Slab in weights of 300 and 400.
Note the | (the pipe character) which separates the 2 font specifications.
@import ",400|Roboto+Slab:300,400";
/* Example #4 - Adjust Body Font Family & Weight
This is an example of some of the CSS you will need to load after replacing one web font with another.
body {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment