I am working on legacy code base that has these and more #font-face declarations
#font-face {
font-family: 'Lato';
font-weight: $font-weight-thin;
font-style: $font-style-normal;
text-rendering: optimizeLegibility;
src: url('#{$lato-path}Lato-Thin-webfont.eot');
src: url('#{$lato-path}Lato-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('#{$lato-path}Lato-Thin-webfont.woff2') format('woff2'),
url('#{$lato-path}Lato-Thin-webfont.woff') format('woff'),
url('#{$lato-path}Lato-Thin-webfont.ttf') format('truetype'),
url('#{$lato-path}Lato-Thin-webfont.svg#latothin') format('svg');
}
#font-face {
font-family: 'Lato';
font-weight: $font-weight-thin;
font-style: $font-style-italic;
text-rendering: optimizeLegibility;
src: url('#{$lato-path}Lato-ThinItalic-webfont.eot');
src: url('#{$lato-path}Lato-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('#{$lato-path}Lato-ThinItalic-webfont.woff2') format('woff2'),
url('#{$lato-path}Lato-ThinItalic-webfont.woff') format('woff'),
url('#{$lato-path}Lato-ThinItalic-webfont.ttf') format('truetype'),
url('#{$lato-path}Lato-ThinItalic-webfont.svg#latothin_italic') format('svg');
}
Clearly these are referencing 2 separate font files, but will the other versions ever get reached if they all have the same font family name?
font-family: 'Lato';
Yes. Note that the font-style differs, so the fonts will be applied to their respective font styles (first to normal, second to italic)
Related
I can't seem to get #font-face to work for my site. I'm not sure if I'm doing this correctly. Does this look right?
#font-face {
font-family: 'bebas_neue_regularregular';
src: url('../fonts/bebasneue_regular-webfont.eot');
src: url('../fonts/bebasneue_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bebasneue_regular-webfont.woff2') format('woff2'),
url('../fonts/bebasneue_regular-webfont.woff') format('woff'),
url('../fonts/bebasneue_regular-webfont.ttf') format('truetype'),
url('../fonts/bebasneue_regular-webfont.svg#bebas_neue_regularregular') format('svg');
font-weight: normal;
font-style: normal;}
#font-face {
font-family: 'vollkornregular';
src: url('../fonts/vollkorn-regular-webfont.eot');
src: url('../fonts/vollkorn-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/vollkorn-regular-webfont.woff2') format('woff2'),
url('../fonts/vollkorn-regular-webfont.woff') format('woff'),
url('../fonts/vollkorn-regular-webfont.ttf') format('truetype'),
url('../fonts/vollkorn-regular-webfont.svg#vollkornregular') format('svg');
font-weight: normal;
font-style: normal;}
The #font-face rule usually doesn't support some old browsers. I usually use font-face generator which will generate css file from your font that you need to include, and all browsers will show it correctly.
I'd like to use a certain font which comes in different styles/weights for bold, italic etc. on my projects. The different styles should belong to one specific font-family "share".
So I came up with this CSS:
font-face {
font-family: 'share';
src: url('share-regular.eot');
src: url('share-regular.eot?#iefix') format('embedded-opentype'),
url('share-regular.woff') format('woff'),
url('share-regular.ttf') format('truetype'),
url('share-regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'share';
src: url('share-bold.eot');
src: url('share-bold.eot?#iefix') format('embedded-opentype'),
url('share-bold.woff') format('woff'),
url('share-bold.ttf') format('truetype'),
url('share-bold.svg') format('svg');
font-weight: bold;
}
#font-face {
font-family: 'share';
src: url('share-italic.eot');
src: url('share-italic.eot?#iefix') format('embedded-opentype'),
url('share-italic.woff') format('woff'),
url('share-italic.ttf') format('truetype'),
url('share-italic.svg') format('svg');
font-style: italic;
}
(There's also a monospaced variant, but i put that into a different family "share-mono" for now.)
But this doesn't work for "italic". I'm not sure about "bold": It looks ok, but it could be that it's just the "regular" being boldened and not the specific share-bold being used.
So I'd like to know if it's even possible to achieve what I'd like to do, and if so, where's my mistake?
Thanks in advance!
Hendrik
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.
I have a regular and bold version of a font face implemented like this:
#font-face {
font-family: 'TeXGyreAdventor';
src: url('../fonts/texgyreadventor-regular-webfont.eot');
src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'TeXGyreAdventor';
src: url('../fonts/texgyreadventor-bold-webfont.eot');
src: url('../fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-bold-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-bold-webfont.svg#TeXGyreAdventorbold') format('svg');
font-weight: bold;
font-style: normal; }
body { font-family: 'TeXGyreAdventor'; }
Now I would expect anything told to be bold in the CSS to use the bold version of the font and everything else to use the regular version. Alas this doesn't work. The browser uses the regular version for everything and implements it's own faux style.
If on the other hand I implement the font face like this:
#font-face {
font-family: 'TeXGyreAdventor';
src: url('../fonts/texgyreadventor-regular-webfont.eot');
src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
font-weight: normal;
font-style: normal; }
#font-face {
font-family: 'TeXGyreAdventorBold';
src: url('../fonts/texgyreadventor-bold-webfont.eot');
src: url('../fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-bold-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-bold-webfont.svg#TeXGyreAdventorbold') format('svg');
font-weight: normal;
font-style: normal; }
body { font-family: 'TeXGyreAdventor'; }
b,strong {
font-weight: normal;
font-family: 'TeXGyreAdventorBold'; }
Then it works! What gives? I thought the first method is suppose to work. Am I doing something wrong? Is there no way for the browser to understand what is bold and apply the correct version of the font? I don't want to have to declare a new font family for any bit of CSS I want to make bold!
i have installed webkit Quicksand Light and book in to my CSS file, its all working fine in all browsers on the PC however when i view it on a MAC in any browser the quicksand light web font doesnt display properly comes out like a times new roman type of font. Is it not picking up the font? or is it just not rendering?
cant find any solutions to this problem, been at it all day trying to fix it
CSS:
#font-face {
font-family: 'QuicksandLight';
src: url('/assets/fonts/Quicksand_Light-webfont.eot');
src: url('/assets/fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
/*url('/assets/fonts/Quicksand_Light.otf');*/
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'QuicksandLightOblique';
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot');
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'QuicksandBook';
src: url('/assets/fonts/Quicksand_Book-webfont.eot');
src: url('/assets/fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Book-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Book-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
CSS for QuicksandBook;
body
{
font:13px/24px 'QuicksandBook', Arial,sans-serif;
font-weight: normal;
}
these have been referenced in the head section.
Unfortunately I don't have a Mac available to test on, but some of the pointers listed here might well be worth a shot. Let us know how you get on!
http://paulirish.com/2010/font-face-gotchas/#smiley
I normally load all of my font's at the very top of my css - I dont know if that makes a difference.
Also for future reference you can do your font's like this:
#font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Light-webfont.eot');
src: url('/assets/fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
/*url('/assets/fonts/Quicksand_Light.otf');*/
font-weight: lighter;
font-style: normal;
}
#font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot');
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
font-weight: lighter;
font-style: italic;
}
#font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Book-webfont.eot');
src: url('/assets/fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/Quicksand_Book-webfont.woff') format('woff'),
url('/assets/fonts/Quicksand_Book-webfont.ttf') format('truetype'),
url('/assets/fonts/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;
}
This means you can reference the font weight in your css rather than having to set the font as oblique. eg
body
{
font: italic lighter 13px/24px 'Quicksand', Arial,sans-serif;
}
That will print the font in Italic in the lighter style