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.
Related
I have following fonts in my style.css in my wordpress theme.
#font-face {
font-family: 'latoregular';
src: url('./fonts/lato-regular.eot');
src: url('./fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/lato-regular.woff2') format('woff2'),
url('./fonts/lato-regular.woff') format('woff'),
url('./fonts/lato-regular.ttf') format('truetype'),
url('./fonts/lato-regular.svg#latoregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'bebasregular';
src: url('./fonts/bebas___-webfont.eot');
src: url('./fonts/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/bebas___-webfont.woff2') format('woff2'),
url('./fonts/bebas___-webfont.woff') format('woff'),
url('./fonts/bebas___-webfont.ttf') format('truetype'),
url('./fonts/bebas___-webfont.svg#bebasregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'coustardregular';
src: url('./fonts/coustard-regular.eot');
src: url('./fonts/coustard-regular.eot?#iefix') format('embedded-opentype'),
url('./fonts/coustard-regular.woff2') format('woff2'),
url('./fonts/coustard-regular.woff') format('woff'),
url('./fonts/coustard-regular.ttf') format('truetype'),
url('./fonts/coustard-regular.svg#coustardregular') format('svg');
font-weight: normal;
font-style: normal;
}
This is the text in h2 element
The h2 element has font-family of coustardregular and font-weight of bold. As you can see in the image the structure of letter T is very strange and so is with letter I. I got this problem only in chrome and nowhere else. I tried this link also but it does not work and I have no idea about it. Can anybody guide me over this.
Where are you getting your font files from? I normally try to stick to using Google fonts rather than using loads of files because you know they'll work as they've been tried and tested whereas a lot of the time when you use the individual files, they've been converted from another file type which is where a lot of problems come from.
Google Fonts has the Coustard font and you can use it simply by adding the following to your css file (at the top):
#import url(https://fonts.googleapis.com/css?family=Coustard);
...or head over to Google to customize - https://www.google.com/fonts/specimen/Coustard
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 just pulled up a project I'm working on to make some modifications, and noticed that declaration font-weight: lighter which is being served via #font-face and it is no longer working on the site (see image - top chrome, bottom ff). Nothing has changed on my system (Windows) since last night, bar being upgraded to Chrome 19.0.1084.46 today, which I presume is the problem, but I am wondering if anyone else has noticed this or if there is a fix?
Thanks.
Try using a number instead the relative term lighter.
For example: font-weight:100 will be the lightest.
There's a handy article about relative and absolute font-weights here:
http://webdesign.about.com/od/fonts/qt/aa031807.htm
If you are using a font-face font that has multiple styles (as you should) make sure that each variant is specifically tied to a font-weight, that way each variation has its own explicit file. Otherwise it's kinda up to the browser to make up what it wants to do. I have found that the automatically generated code from font-squirrel does not do this (though perhaps they've updated they're packaging)
Notice in the following code how each file has font-weight and font-style set explicitly. This leaves no room for guessing.
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreamsItalic-webfont.eot');
src: url('fonts/CaviarDreamsItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreamsItalic-webfont.woff') format('woff'),
url('fonts/CaviarDreamsItalic-webfont.ttf') format('truetype'),
url('fonts/CaviarDreamsItalic-webfont.svg#CaviarDreamsItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams_BoldItalic-webfont.eot');
src: url('fonts/CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams_BoldItalic-webfont.woff') format('woff'),
url('fonts/CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams-webfont.eot');
src: url('fonts/CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams-webfont.woff') format('woff'),
url('fonts/CaviarDreams-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams_Bold-webfont.eot');
src: url('fonts/CaviarDreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams_Bold-webfont.woff') format('woff'),
url('fonts/CaviarDreams_Bold-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams_Bold-webfont.svg#CaviarDreamsBold') format('svg');
font-weight: bold;
font-style: normal;
}
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.
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;
}