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

Extend Compass Sass font-face mixin

CSS Development showcase

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.

Donations for the magus

  • XLM (Stellar Lumens): yukino*
    • XLM memo/tag (optional): for
  • XRP (Ripple): rU2mEJSLqBRkYLVTv55rFTgQajkLTnT6mA
    • XRP memo/tag (required): 246013
  • ZEC (Zcash): t1QUJ4fdzwtpyg2s5Qk44jqMsTdJQ2BwXe4
  • ₿CH (Bitcoin cash): pp8fkmchlu6a7c53a2s682jd70mncrzemsthca6ftl
  • ₿TC (Bitcoin core): 32w1De4wvr5jEzC4g5P4rkjvqg2bvMR8Vk
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.

Leave a Reply