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

Extend Compass Sass font-face mixin

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.

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 and his own community forums Laibcoms.Community. By 2003 he created his work blog GM-Yukino which grew into gameshogun™, Snoworld™, and techmagus™.

His website is jcsesecuneta.com and 1way.faith. He also owns Clean Real Food, YourOnly.One, Adorable & Beautiful, and other online properties.

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

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.

Comment(s) via

Loading Facebook Comments ...
Loading Disqus Comments ...
Skip to toolbar