A Sass mixin to allow easy, efficient usage of [https://google.com/webfonts](Google Web Fonts). Supports all feautures of Google Web Fonts. Google Web Fonts documentation is available https://developers.google.com/webfonts/docs/getting_started.
@include web-font((Tangerine, Open Sans), (italic bolditalic bold, i), (latin, cyrillic), ('thisismytext'), (shadow multiple, float 3d), true);The @mixin takes six parameters, Font Families, Variants, Subsets, Characters, Effects and a Secure boolean.
Each parameter except Secure is enclosed in brackets, as they are Sass lists.
Font Families is the only required paramater, and all others can be bypassed by using (), except the Secure flag which can be left empty.
The Font Families parameter takes a comma-seperated list of fonts to include. It is important not to use any quotes in this parameter.
This parameter is the only parameter which is non-optional.
The variants parameter takes a comma-seperated list of font-variants. Each item in the list is applied to the font with the same index in the Fonts parameter.
In the example below, the Tangerine font includes both the italic and bolditalic variants, the Open Sans font includes the bold and 800-weight variants, and the Damion font includes no special-variants, and only includes the default version of that font.
@include web-font((Tangerine, Open Sans, Damion), (italic bolditalic, b 800));It is important not to use any quotes in this parameter.
The supported variants are italic, bold, and bolditalic, which can be abbreviated to i, b, bi, as well as numeric font weights.
The Subsets parameter allows you to request only specific scripts of each font. Subsets are specified in a comma-seperated list. This parameter applies to all fonts requested by the current @mixin, as Google Web Fonts does not allow per-font subsets.
It is important not to use any quotes in this parameter.
The Characters parameter takes a string containing all the characters that you want to use with all of the fonts you include. (Google Web Fonts does not currently allow you to specify characters on a per-font basis.)
It is important to note that any special characters must be URL-encoded. For convenience, web-fonts.scss will automatically add %20 (a URL-encoded space character) to your characters parameter.
The Font Effects parameter takes a comma-separated list of Google Web Fonts font effects for use with your fonts. Documentation on the Google Web Fonts font effects is available https://developers.google.com/webfonts/docs/getting_started#Effects.
In the case that the name a Font Effect is made up of more than one word, multiple words can be separated by either spaces or hyphens.
The font effects are applied to all fonts, as Google Web Fonts does not currently allow you to specify font effects on a per-font basis.
It is important not to use any quotes in this parameter.
By default, fonts are loaded using http. If you need them to be loaded using https, you will need to send the mixin a value of true for the secure paramater. The example below will include Open Sans font, loading it via https.
@include web-font((Open Sans), $secure: true);- web-fonts.scss cannot URL-encode characters in the Characters parameter.