Skip to content

Instantly share code, notes, and snippets.

@wycks
Last active December 9, 2016 20:09
Show Gist options
  • Save wycks/42e88a4a6e034863584c to your computer and use it in GitHub Desktop.
Save wycks/42e88a4a6e034863584c to your computer and use it in GitHub Desktop.
Chrome font render order
/* chrome fix render svg first */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'LarsseitBold';
src: url('../font/good/larsseit-bold.svg') format('svg');
}
@font-face {
font-family: 'LarsseitExtraBold';
src: url('../font/good/larsseit-extrabold.svg') format('svg');
}
@font-face {
font-family: 'LarsseitMedium';
src: url('../font/test/larsseit-medium.svg') format('svg');
}
@font-face {
font-family: 'LarsseitRegular';
src: url('../font/good/larsseit.svg') format('svg');
}
@font-face {
font-family: 'LarsseitThin';
src: url('../font/test/larsseit-thin.svg') format('svg');
}
}
/* for other browser just load it like so */
@font-face {
font-family: 'LarsseitRegular';
src: url('../font/larsseit.eot');
src: url('../font/larsseit.eot?#iefix') format('embedded-opentype'),
url('../font/larsseit.woff') format('woff'),
url('../font/larsseit.ttf') format('truetype'),
url('../font/larsseit.svg#LarsseitRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* htaccess hack */
<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
@steve-acet
Copy link

Have you seen this code in action on Chrome 37 Windows 7/8? On my site its now worse, but XP is fine. If I remove hack it looks great on Windows 7/8 but even worse on XP.

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