Skip to content

Instantly share code, notes, and snippets.

@diogomoretti
Last active November 20, 2019 06:37
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save diogomoretti/7278541 to your computer and use it in GitHub Desktop.
Save diogomoretti/7278541 to your computer and use it in GitHub Desktop.
Stylus mixin @font-face
// Fonts mixin
font-url(file)
return '../fonts/' + file
webfont(family, file, hack-chrome-windows = false, weight = 'normal')
@font-face
font-family family
src url(font-url(file + '.eot'))
src url(font-url(file + '.eot?#iefix')) format('embedded-opentype'),
url(font-url(file + '.woff')) format('woff'),
url(font-url(file + '.ttf')) format('truetype'),
url(font-url(file + '.svg#'+ family)) format('svg')
font-weight weight
font-style normal
if hack-chrome-windows
@media screen and (-webkit-min-device-pixel-ratio:0)
@font-face
font-family family
src url(font-url(file + '.svg#'+ family)) format('svg')
@diogomoretti
Copy link
Author

How to use:

webfont('Open Sans', 'open-sans-webfont', true, 'normal')

@iest
Copy link

iest commented Nov 12, 2014

Saved me a bunch of time figuring out my own one! 👍 🌟

@annielmenezes
Copy link

Nice, thanks @diogomiretti (y)²

@oliverbenns
Copy link

Nice one!

@awonawilona
Copy link

thanks

@DJviolin
Copy link

DJviolin commented Apr 28, 2016

Thank You! Really useful! Here is my version with sub-folder support: https://gist.github.com/DJviolin/3f64b2adf920eb31950e426b62d12a7a

@Venegrad
Copy link

thanks

@Alpscloud
Copy link

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment