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) 🚀🪐17: yukino* XLM (Stellar Lumens) 🚀🪐17: yukino*
    • XLM memo/tag (optional): for
    • Highly preferred
  • ZEC (Zcash) Z0.03: t1W7HusjBAXgquM7YHu6xDUEBejmYPKU2HC ZEC (Zcash) Z0.03: t1W7HusjBAXgquM7YHu6xDUEBejmYPKU2HC
  • XRP (Ripple) X5: rU2mEJSLqBRkYLVTv55rFTgQajkLTnT6mA XRP (Ripple) X5: rU2mEJSLqBRkYLVTv55rFTgQajkLTnT6mA
    • XRP memo/tag (required): 246013
  • STEEM: yahananxie STEEM: yahananxie
  • ETH_smartcontract (Etherium) Ξ0.007: 0x739d2aae2a5b7a4e1d64c58d121c9d908d706c83 ETH_smartcontract (Etherium) Ξ0.007: 0x739d2aae2a5b7a4e1d64c58d121c9d908d706c83
    • Gas: please use at least 35,000
    • Do not send non-smartcontract ΞTH and ERC20 tokens to this address.
  • ETH_ERC20 (Etherium) Ξ0.007: 0xB127362Dc268B63cE22E697344D2c51e673f18B6 ETH_ERC20 (Etherium) Ξ0.007: 0xB127362Dc268B63cE22E697344D2c51e673f18B6
    • Accepts non-smartcontract transactions and ERC20 tokens (in particular: AWC, ENJ, PAX, TUSD, USDC)
  • BCH (Bitcoin cash) ₿CH0.004: pp8fkmchlu6a7c53a2s682jd70mncrzemsthca6ftl BCH (Bitcoin cash) ₿CH0.004: pp8fkmchlu6a7c53a2s682jd70mncrzemsthca6ftl
  • XBT (Bitcoin core) ₿0.0002: 32w1De4wvr5jEzC4g5P4rkjvqg2bvMR8Vk XBT (Bitcoin core) ₿0.0002: 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