Packing multiple weights into one web font

Question

I use Font Squirrel to convert my fonts to web versions used. I would like you to not have to translate each weight separately and include them in my css (add a lot of bloat with all these calls).

Is there a way to pack multiple weights into a single font and use the font-weight property to correctly call the correct characters?

Trying to avoid fake bold and artificial italics here.

Answer 1

Set the font-weight and font-style properties in your @font-face calls (instead of the default FontSquirrel output, where they are all set to normal , and instead they have separate names for each weight / style) and name them all the same fonts .

Here is an example from a site that 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; } 

Please note that FontSquirrel does not automatically generate code in this way because some older browsers / user agents do not support the font-weight and font-style properties inside @font-face ads, so they are more backward compatible using the method by which you You will name the fonts differently for each weight and style (CartoGothicRegular, CartoGothicBold, CartoGothicItalic, CartoGothicBoldItalic, etc.).

In addition, FontSquirrel can actually do this for you - if you click Expert options in the Generator Webfont, there is an option in the "CSS" section called Style Link that displays them in this format.

Answer 2

Here 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 is actually no way to create separate fonts, but using the font-weight and font-style attributes will reduce the call. You simply declare font-family once.