Skip to content

Instantly share code, notes, and snippets.

@craigmdennis
Created May 22, 2014 01:52
Show Gist options
  • Save craigmdennis/206f0e545cc2b2cdaad0 to your computer and use it in GitHub Desktop.
Save craigmdennis/206f0e545cc2b2cdaad0 to your computer and use it in GitHub Desktop.
The correct @font-face setup for Clear Sans
// ===================================================
// Font Face Rules
// ===================================================
@font-face {
font-family: 'Clear Sans';
font-style: normal;
font-weight: 100;
src: local('ClearSans-Thin'), local('Clear Sans Thin'),
url('../fonts/clearsans/ClearSans-Thin.eot'),
url('../fonts/clearsans/ClearSans-Thin.eot?#iefix') format('embedded-opentype'),
url('../fonts/clearsans/ClearSans-Thin.woff') format('woff'),
url('../fonts/clearsans/ClearSans-Thin.ttf') format('truetype'),
url('../fonts/clearsans/ClearSans-Thin.svg') format('svg');
}
@font-face {
font-family: 'Clear Sans';
font-style: normal;
font-weight: 300;
src: local('ClearSans-Light'), local('Clear Sans Light'),
url('../fonts/clearsans/ClearSans-Light.eot'),
url('../fonts/clearsans/ClearSans-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/clearsans/ClearSans-Light.woff') format('woff'),
url('../fonts/clearsans/ClearSans-Light.ttf') format('truetype'),
url('../fonts/clearsans/ClearSans-Light.svg') format('svg');
}
@font-face {
font-family: 'Clear Sans';
font-style: normal;
font-weight: 400;
src: local('ClearSans'), local('Clear Sans'),
url('../fonts/clearsans/ClearSans-Regular.eot'),
url('../fonts/clearsans/ClearSans-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/clearsans/ClearSans-Regular.woff') format('woff'),
url('../fonts/clearsans/ClearSans-Regular.ttf') format('truetype'),
url('../fonts/clearsans/ClearSans-Regular.svg') format('svg');
}
@font-face {
font-family: 'Clear Sans';
font-style: italic;
font-weight: 400;
src: local('ClearSans-Italic'), local('Clear Sans Italic'),
url('../fonts/clearsans/ClearSans-Italic.eot'),
url('../fonts/clearsans/ClearSans-Italic.eot?#iefix') format('embedded-opentype'),
url('../fonts/clearsans/ClearSans-Italic.woff') format('woff'),
url('../fonts/clearsans/ClearSans-Italic.ttf') format('truetype'),
url('../fonts/clearsans/ClearSans-Italic.svg') format('svg');
}
@font-face {
font-family: 'Clear Sans';
font-style: normal;
font-weight: 500;
src: local('ClearSans-Medium'), local('Clear Sans Medium'),
url('../fonts/clearsans/ClearSans-Medium.eot'),
url('../fonts/clearsans/ClearSans-Medium.eot?#iefix') format('embedded-opentype'),
url('../fonts/clearsans/ClearSans-Medium.woff') format('woff'),
url('../fonts/clearsans/ClearSans-Medium.ttf') format('truetype'),
url('../fonts/clearsans/ClearSans-Medium.svg') format('svg');
}
@font-face {
font-family: 'Clear Sans';
font-style: italic;
font-weight: 500;
src: local('ClearSans-MediumItalic'), local('Clear Sans Medium Italic'),
url('../fonts/clearsans/ClearSans-MediumItalic.eot'),
url('../fonts/clearsans/ClearSans-MediumItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/clearsans/ClearSans-MediumItalic.woff') format('woff'),
url('../fonts/clearsans/ClearSans-MediumItalic.ttf') format('truetype'),
url('../fonts/clearsans/ClearSans-MediumItalic.svg') format('svg');
}
@font-face {
font-family: 'Clear Sans';
font-style: normal;
font-weight: 700;
src: local('ClearSans-Bold'), local('Clear Sans Bold'),
url('../fonts/clearsans/ClearSans-Bold.eot'),
url('../fonts/clearsans/ClearSans-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/clearsans/ClearSans-Bold.woff') format('woff'),
url('../fonts/clearsans/ClearSans-Bold.ttf') format('truetype'),
url('../fonts/clearsans/ClearSans-Bold.svg') format('svg');
}
@font-face {
font-family: 'Clear Sans';
font-style: italic;
font-weight: 700;
src: local('ClearSans-BoldItalic'), local('Clear Sans Bold Italic'),
url('../fonts/clearsans/ClearSans-BoldItalic.eot'),
url('../fonts/clearsans/ClearSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/clearsans/ClearSans-BoldItalic.woff') format('woff'),
url('../fonts/clearsans/ClearSans-BoldItalic.ttf') format('truetype'),
url('../fonts/clearsans/ClearSans-BoldItalic.svg') format('svg');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment