I'm using Font Squirrel to convert my fonts into useable web versions. I'd like to not have to convert each weight separately and include them in my css (would add alot of bloat with all those calls).
Is there a way to package multiple weights into one font and use the font-weight property to properly call the correct characters?
Trying to avoid the faux-bold and faux-italics here.
Set the font-weight
and font-style
properties accordingly in your @font-face
calls (instead of FontSquirrel's default output where all of them are set to normal
and they have separate names for each weight/style instead), and name them all the same font.
Here's an example from a site I built last year:
@font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-Book-webfont.eot');
src: url('library/fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-Book-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-Bold-webfont.eot');
src: url('library/fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-Bold-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-Italic-webfont.eot');
src: url('library/fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-Italic-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'CartoGothic';
src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot');
src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('library/fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'),
url('library/fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'),
url('library/fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
Note that FontSquirrel doesn't automatically generate code this way for a reason - which is that some older browsers / user agents do not support font-weight
and font-style
properties inside of @font-face
declarations, so it's more backwards compatible to use the method where you name the fonts differently for each weight and style (CartoGothicRegular, CartoGothicBold, CartoGothicItalic, CartoGothicBoldItalic and so forth).
Also, FontSquirrel actually can do this for you - if you click Expert settings in the Webfont Generator, there is an option under "CSS" called Style Link which will output them in this format.
Here's to back up Ennui's answer:
@font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font.eot');
src: local('☺'), url('fonts/SF Your Font.woff') format('woff'), url('fonts/SF Your Font.ttf') format('truetype'), url('fonts/SF Your Font.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font Bold.eot');
src: local('☺'), url('fonts/SF Your Font Bold.woff') format('woff'), url('fonts/SF Your Font Bold.ttf') format('truetype'), url('fonts/SF Your Font Bold.svg') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font Italic.eot');
src: local('☺'), url('fonts/SF Your Font Italic.woff') format('woff'), url('fonts/SF Your Font Italic.ttf') format('truetype'), url('fonts/SF Your Font Italic.svg') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Your Font';
src: url('fonts/SF Your Font Bold Italic.eot');
src: local('☺'), url('fonts/SF Your Font Bold Italic.woff') format('woff'), url('fonts/SF Your Font Bold Italic.ttf') format('truetype'), url('fonts/SF Your Font Bold Italic.svg') format('svg');
font-weight: bold;
font-style: italic;
}
There's really no way around the creation of separate fonts, but using the font-weight
and font-style
attributes, you will reduce the call. You just declare font-family
once.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With