Sass Web Fonts

A Sass mixin to allow easy, efficient usage of Google Web Fonts.

You can clone this repo and include _web-fonts.scss in your project manually, or you can install the sass-web-fonts package from Bower.

Usage

First, import Sass Web Fonts like this:

@import "web-fonts";

Importing a single font

@include web-fonts("Open Sans");

Specifying font variant

@include web-fonts(("Open Sans": "bold"));

Multiple variants

@include web-fonts(("Open Sans": ("500", "600 italic")));

Multiple fonts

@include web-fonts("Open Sans", ("Ubuntu": ("400", "italic")));

Protocols

By default, the web-fonts mixin will attempt to load fonts with the same protocol that was used to access the stylesheet it was called in. However, in some circumstances, most notably when the stylesheet was loaded as a local file (using a file:// url), this will not work. In this situation, it is possible to override the automatic protocol detection by setting the $web-fonts-protocol variable prior to calling the mixin.

Example

$web-fonts-protocol: "https"; // fonts will be loaded over HTTPS from here on.
@include web-fonts("Open Sans"); // uses HTTPS;

Extra parameters

To add additional parameters to the web fonts URL, you can override the $web-fonts-params variable with a map containing the extra URL params. For example, you can use it to specify character subsets:

$web-fonts-params: (subset: "latin,latin-ext");
@include web-fonts("Open Sans");

/* Generated CSS */
@import url("//fonts.googleapis.com/css?subset=latin%2Clatin-ext&family=Open%20Sans");

A list of available parameters can be found in the Google Web Fonts documentation.

Testing

Development of this mixin uses SassUnit for unit tests. To run the tests after making a change to the mixin, do this:

$ bundle install
$ bundle exec sassunit

Troubleshooting

If you get a Sass::SyntaxError when using the library, you probably need to update Sass. See issue #7 for more information.

---

Requires Sass 3.3 or later version. Not compatible with libsass. Pull requests welcome.

You can follow me on Twitter.