Skip to content

Instantly share code, notes, and snippets.

@RomanovRoman
Last active August 29, 2015 14:01
Show Gist options
  • Save RomanovRoman/acf9b3f4560b5d7b6737 to your computer and use it in GitHub Desktop.
Save RomanovRoman/acf9b3f4560b5d7b6737 to your computer and use it in GitHub Desktop.
/*
Always send your font files gzipped, average 40% to be won,
but could be 70% you never know.
http://www.phpied.com/gzip-your-font-face-files/
*/
/*
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
*/
/*
Browsers start with the last src: declaration
and look for the first font it can load.
In IE9's compatibility mode's case, it fails on the last src,
so it moves up to the previous src. As far as we've tested,
browsers only download what they need.
*/
/*
http://www.paulirish.com/2010/font-face-gotchas/
*/
/*
Hosting the fonts on a different domain?
Firefox requires some extra effort;
you’ll need to add the Access-Control-Allow-Origin header,
whitelisting the domain you’re pulling the asset from.
Alternatively, you can use the base64 encoding in CSS (create it with the
fontsquirrel generator (http://www.fontsquirrel.com/fontface/generator))
to avoid setting headers.
details here:
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
*/
@font-face {
font-family: 'some';
/*
IE9 Compat Modes
*/
src: url('some-webfont.eot');
src:
/*
Don't use installed fonts, force load from site.
*/
local("☺"),
/*
IE6-IE8
ie9-give-me-the-woff-instead
*/
url('some-webfont.eot?#iefix') format('embedded-opentype'),
/*
IE >= 9,
Firefox >= 3.5,
Chrome >= 5.0,
Safari >= 5.1,
Opera >= 11.1,
iOS Safari >= 5.0,
Android Browser 4.4
*/
url('some-webfont.woff') format('woff'),
/*
IE >= 9 (when set to be "installable"),
Firefox >= 3.6,
Chrome >= 5.0,
Safari >= 5.1,
Opera >= 11.1,
iOS Safari >= 5.0,
Android Browser 4.4
*/
url('some-webfont.ttf') format('truetype'),
/*
Chrome >= 4.0,
Safari >= 3.2,
Opera >= 9.0,
iOS Safari >= 3.2,
Android Browser 3.0,
Opera Mobile 10.0,
Chrome for Android 33.0
*/
/*
http://stackoverflow.com/questions/4060607/font-face-anti-aliasing-on-windows-and-mac/9041280#9041280
*/
url('some-webfont.svg#some-font') format('svg');
font-weight: normal;
font-style: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment