Code: SASS/SCSS (CC BY-SA 4.0)

Extend Compass Sass font-face mixin

Posted by

I use @font-face a lot especially on my sites. For example, on this blog alone, I use fonts to display Creative Commons icons which is ways better than loading images.

However, after I started using Sassy CSS (SCSS) via Compass, the first feature I immediately looked for is the font-face mixin. The current stable and bleeding edge versions lack two features I need to use in my @font-face declarations – unicode-range; and local(”). Two very useful @font-face CSS descriptors.

To solve this, I immediately went to work and pulled the master branch of Compass and added the two descriptors in the font-face mixin. I already filed a pull request here, it is now up to the Compass devs to review and decide if it is worth merging it in the master and stable branches.

But what if you want to use it today without git cloning my branch? Here’s how.

font-face mixin override

  • Copy the following code and save it in your project’s partials folder as: _font-face.scss
  • Prism Shortcode Error: field, url, data_src is missing

  • Include it in your main stylesheet.scss by adding the following at the top:
  • Prism Shortcode Error: field, url, data_src is missing

  • Follow this format to use your new font-face mixin override
  • Prism Shortcode Error: field, url, data_src is missing

The Resulting CSS

Prism Shortcode Error: field, url, data_src is missing

It’s that simple!

You can also fork and extend this override code here via GitHub Gist.

Software Card
Author Rating
no rating based on 0 votes
Software Name
Compass SASS @font-face mixin extension
Software Page

Is a self-confessed bibliophile and technophile other than being an early adopter, an avid gamer, a geek, nerd, role-player, anime otaku, and trekker.

His first online project was in 1998 when he launched the unofficial website for Ansalon MUD (a text-based, telnet online game) and his own community forums Laibcoms.Community. By 2003 he created his work blog GM-Yukino which grew into gameshogun™, Snoworld™, and techmagus™ over the years.

Yuki’s latest project is Verses.Space™, a Free Culture / Creative Commons, collaborative, and shared-world, worldbuilding and writing project.

His hubsite is Tomes of Knowledge™. He also runs YourOnly.One™, One Way Faith™, Adorable & Beautiful™, Clean Real Food™, and other online properties.

You can confirm his identity from his Keybase profile and learn more by reading his central bio.

CC BY-SA 4.0 Extend Compass Sass font-face mixin by Yuki (雪亮) is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at Legal Notice.

Leave a Reply