i searched through Stack overflow but fail to find a solution in regards to the problems i face...I believe many people is facing the same problem as well but i am not sure why their solutions can't work on mine.
The Problem:
This is regarding #font-face.
The code on CSS:
#font-face {
font-family: 'JaguarJCBold';
src: url('fonts/jagb____-webfont.eot');
src: url('fonts/jagb____-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/jagb____-webfont.woff') format('woff'),
url('fonts/jagb____-webfont.ttf') format('truetype'),
url('fonts/jagb____-webfont.svg#JaguarJCBold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'TrajanProBold';
src: url('fonts/trajanprobold-webfont.eot');
src: url('fonts/trajanprobold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/trajanprobold-webfont.woff') format('woff'),
url('fonts/trajanprobold-webfont.ttf') format('truetype'),
url('fonts/trajanprobold-webfont.svg#TrajanProBold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'TrajanProRegular';
src: url('fonts/trajanproregular-webfont.eot');
src: url('fonts/trajanproregular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/trajanproregular-webfont.woff') format('woff'),
url('fonts/trajanproregular-webfont.ttf') format('truetype'),
url('fonts/trajanproregular-webfont.svg#TrajanProRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MyriadProBlack';
src: url('fonts/myriadpro-black-webfont.eot');
src: url('fonts/myriadpro-black-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myriadpro-black-webfont.woff') format('woff'),
url('fonts/myriadpro-black-webfont.ttf') format('truetype'),
url('fonts/myriadpro-black-webfont.svg#MyriadProBlack') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MyriadProRegular';
src: url('fonts/myriadproreg-webfont.eot');
src: url('fonts/myriadproreg-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myriadproreg-webfont.woff') format('woff'),
url('fonts/myriadproreg-webfont.ttf') format('truetype'),
url('fonts/myriadproreg-webfont.svg#MyriadProRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone know how to make this work for google chrome to allow my fonts to take effect?
Try using the Font Squirrel Font Face generator:
http://www.fontsquirrel.com/fontface/generator
It will give you all the correct CSS for every possible browser.
All you've done is set up your fonts so that they're ready to use in your css file. You need to apply the font to what ever piece of text you wish to style. You would do this the same way you would when using any other web safe font.
eg.
.yourElement {
font: 30px JaguarJCBold;
}
Related
Segments:
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
url('../font/jura-demibold.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal; }
From the post, I learn its value is a prioritized by comma-separated list. Then, from the post, I learned such url's layout is for compatibility of browsers(especially ie9).
However, I still don't know the priority of semicolon, so I am confused, why I have never seen such layout below? is it correct version?
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot') format('eot'),
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
url('../font/jura-demibold.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal; }
The value of the src property is a prioritized list, so each browser will use the first font in the list that is in a format it supports.
https://www.w3.org/TR/css-fonts-3/#src-desc
#font-face {
font-family: 'RobotoLight';
font-weight: normal;
font-style: normal;
src: url('../font/jura-demibold.eot') format('eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
url('../font/jura-demibold.svg#RobotoLight') format('svg');
}
That is how I would do it and do it on production sites. The only change is adding a semi-colon at the end of your first src attribute.
#font-face {
font-family: 'exoregular';
src: url('exo-regular-webfont.eot');
src: url('exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('exo-regular-webfont.woff2') format('woff2'),
url('exo-regular-webfont.woff') format('woff'),
url('exo-regular-webfont.ttf') format('truetype'),
url('exo-regular-webfont.svg#exoregular') format('svg');
font-weight: normal;
font-style: normal;
}
I've added a font to my website, however it doesn't not show up in firefox, does anyone know why this is the case?
My CSS is above and my fonts are inside my CSS styles folder.
Any help would be appreciated!
You could try using Browser Specific css using this code for Firefox, http://browserhacks.com/ is good source for browser specific CSS hacks or you can just do a Google search for Browser Specific CSS.
#-moz-document url-prefix() {
#font-face {
font-family: 'exoregular';
src: url('exo-regular-webfont.eot');
src: url('exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('exo-regular-webfont.woff2') format('woff2'),
url('exo-regular-webfont.woff') format('woff'),
url('exo-regular-webfont.ttf') format('truetype'),
url('exo-regular-webfont.svg#exoregular') format('svg');
font-weight: normal;
font-style: normal;
}
}
Hope this helps!
I have used the font "DinPro-Light" on my website. It works fine on all browsers on PC except Mac's browsers. The other weights (Regular, Bold, etc) are fine on both PC and Mac. Only the "light" weight is causing the problem. It is rendered like the regular weight...
Below is the CSS used for the font. Thank you...
#font-face {
font-family: 'DinPro';
src: url('../fonts/DinPro/PFDinTextPro-Light.eot');
src: local('☺'), url('../fonts/DinPro/PFDinTextPro-Light.woff') format('woff'), url('../fonts/DinPro/PFDinTextPro-Light.ttf') format('truetype'), url('../fonts/DinPro/PFDinTextPro-Light.svg') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'DinPro';
src: url('../fonts/DinPro/PFDinTextPro-Regular.eot');
src: local('☺'), url('../fonts/DinPro/PFDinTextPro-Regular.woff') format('woff'), url('../fonts/DinPro/PFDinTextPro-Regular.ttf') format('truetype'), url('../fonts/DinPro/PFDinTextPro-Regular.svg') format('svg');
font-weight: 500;
font-style: normal;
}
This css line fixed the problem:
-webkit-font-smoothing: antialiased;
code :
#font-face {
font-family: 'GothamRnd-Medium';
src: url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.eot');
src: url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.eot?#iefix') format('embedded-opentype'),
url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.woff') format('woff'),
url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.ttf') format('truetype'),
url('about/fonts/GothamRnd-Medium/GothamRnd-Medium.svg#GothamRnd-Medium') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ArcherBoldItalic';
src: url('about/fonts/Archer-BoldItal/archer-boldital.eot');
src: url('about/fonts/Archer-BoldItal/archer-boldital.eot?#iefix') format('embedded-opentype'),
url('about/fonts/Archer-BoldItal/archer-boldital.woff') format('woff'),
url('about/fonts/Archer-BoldItal/archer-boldital.ttf') format('truetype'),
url('about/fonts/Archer-BoldItal/archer-boldital.svg#ArcherBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'proxima_novalight';
src: url('about/fonts/ProximaNova-Light/proximanova-light-webfont.eot');
src: url('about/fonts/ProximaNova-Light/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
url('about/fonts/ProximaNova-Light/proximanova-light-webfont.woff') format('woff'),
url('about/fonts/ProximaNova-Light/proximanova-light-webfont.ttf') format('truetype'),
url('about/fonts/ProximaNova-Light/proximanova-light-webfont.svg#proxima_novalight') format('svg');
font-weight: normal;
font-style: normal;
}
I have embedded three fonts. Out of three fonts 'proxima_novalight' font is working perfectly in IE8 but other two fonts are not working. I checked all the code but i didn't find the solution. Its working fine in other browsers. Any idea guys ?
If IE8 throws the CSS3111: #font-face encountered unknown error, you
probably have the non-matching font-family name problem.
To resolve this, you need to edit your font file, define identical
names for Fontname, Family name and Name for humans and export your
TTF. This can be done using the FontForge application. Afterwards, you
than again convert it for web (EOT, WOFF).
#font-face {
font-family: 'portagoitc-tt';
src: url('fonts/portagoitc-tt.eot');
src: url('fonts/portagoitc-tt.eot?iefix') format('opentype'),
url('fonts/portagoitc-tt.woff') format('woff'),
url('fonts/portagoitc-tt.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Please check for further details
Font Face not working in IE8 as expected
I have embedded Yakov thin fonts with CSS via #font-face but the fonts are are so different from the original ones.
What could be the reason for this? Here is my code
#font-face
{
font-family:'Yakovthin';
src: url('../fonts/yakovthin-webfont.eot');
src: url('../fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/yakovthin-webfont.woff') format('woff'),
url('../fonts/yakovthin-webfont.ttf') format('truetype'),
url('../fonts/yakovthin-webfont.svg#') format('svg');
}
div#mainContainer
{
font-family:'Yakovthin';
font-size:12px;
}
Could anyone please help?
Can you provide a URL? Also, try adding font-weight: normal to your code:
#font-face
{
font-family:'Yakovthin';
src: url('../fonts/yakovthin-webfont.eot');
src: url('../fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/yakovthin-webfont.woff') format('woff'),
url('../fonts/yakovthin-webfont.ttf') format('truetype'),
url('../fonts/yakovthin-webfont.svg#') format('svg');
font-weight: normal;
}
div#mainContainer
{
font-family:'Yakovthin';
font-size:12px;
font-weight: normal;
}
You should try this instead :
#font-face
{
font-family:'Yakovthin';
src: url('../fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/yakovthin-webfont.woff') format('woff'),
url('../fonts/yakovthin-webfont.ttf') format('truetype'),
url('../fonts/yakovthin-webfont.svg#') format('svg');
font-weight: normal;
}
I'm pretty sure you can drop the .eot format, as when .ttf isn't supported, .woff is, so it should do the trick. You should also learn about the "unicode-range" option if you want to deal with Hebrew.
I have solved the issue. The problem was that the site the fonts were not generalized properly.