Packaging multiple weights into one web font

Question

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.

Answer 1

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.

Answer 2

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.