All, I found for the same font css of an element , The font shows uppercase in some browser, but lowercase in others. I inspect the element in the firebug . But didn't found any css attributes make it .I don't know which css attribute I should check. Does it have something with the Browser setting ? thanks.
Edit
I use the below way to implement the web fonts in the page. please review it .thanks.
#font-face {
font-family: 'MyWebFontNormal';
src: url('../webfonts/Novecentowide-Normal-webfont.eot');
src: url('../webfonts/Novecentowide-Normal-webfont.eot?iefix') format('embedded-opentype'),
url('../webfonts/Novecentowide-Normal-webfont.ttf') format('truetype'),
url('../webfonts/Novecentowide-Normal-webfont.woff') format('woff'),
url('../webfonts/Novecentowide-Normal-webfont.svg#webfont') format('svg');
}
#font-face {
font-family: 'MyWebFontBold';
src: url('../webfonts/Novecentowide-Bold-webfont.eot');
src: url('../webfonts/Novecentowide-Bold-webfont.eot?iefix') format('embedded-opentype'),
url('../webfonts/Novecentowide-Bold-webfont.ttf') format('truetype'),
url('../webfonts/Novecentowide-Bold-webfont.woff') format('woff'),
url('../webfonts/Novecentowide-Bold-webfont.svg#webfont') format('svg');
}
All, I just found the main reason cause the incompatibility between browsers is because different browser only depend on the different font file. here is the detail of it . please review it. Another thing we should care about when use this css3 feature is the Mime Type of the Font file. Just make sure the server you used for example IIS is added the right Mime Type for the font file. Otherwise the browser can not recognize the type of the resource. Or sometimes will throw the 404 error although the resource is indeed there. thanks.
Related
I checked all question regarding this issue here but no luck. Issue is only with IE7 and above, all other browsers it's working fine.
Below is my CSS code
#font-face {
font-family: 'HelveticaNeue23UltraLightExtended';
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix');
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.woff') format('woff'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.ttf') format('truetype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg');
}
also tried
#font-face {
font-family: 'HelveticaNeue23UltraLightExtended';
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot');
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.eot?#iefix') format('embedded-opentype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.woff') format('woff'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.ttf') format('truetype'),
url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg');
}
and here is the test link http://bit.ly/Rtoxgw
I've had a similar problem where IE ignored the font. The problem then was that the font-family name I used contained too many characters for IE, but worked fine for all the other browsers.
Try shorten down the name HelveticaNeue23UltraLightExtended.
#iefix after question mark states that, you need that url to search a query parameter that will fool IE and let you use website without wasting cache.Many people call it a cache bursting trick.(you can try anything after # in front of question mark, its just a cache burst technique .)
You need to change the order in which you write the fonts to get data sequentially out of fonts, and if you do incorrect ordering ,you may end up with errors in reading "eot" files, permission install on "ttf" format files
try this code, this should work, also you need to locally define this new font as a resource[rename resource files to short names]
Also change this when you use it in css, or style sheets.
Also shorten the font name...
try this:
HelveticaNeueule
#font-face {
font-family: HelveticaNeueule;
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.eot?#iefix') format('embedded-opentype'),
src: local(HelveticaNeueule)
src: url('../fonts/HelveticaNeue-UltraLigExt/helveticaneue-ultraligext.svg#HelveticaNeue23UltraLightExtended') format('svg'),
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.ttf') format('truetype'),
src: url('../fonts/HelveticaNeue-UltraLigExt/HelveticaNeueule.woff') format('woff'),
font-weight: bold
The font parameters like bold, italics can be specified later at end of above block as shown,
Hope this will fix your problem...
I'm sorry for the mistakes I've made, I'm not Englishman. I want to find out the difference between these two examples:
//generated by icomoon.io
#font-face {
font-family: icomoon;
src:url('font.eot?-w9xgwa');
src:url('font.eot?#iefix-w9xgwa') format('embedded-opentype'),
url('font.woff?-w9xgwa') format('woff'),
url('font.ttf?-w9xgwa') format('truetype'),
url('font.svg?-w9xgwa#icomoon') format('svg');
}
//generated by my Sass mixin
#font-face {
font-family: icomoon;
src: url('font.eot');
src: url('font.eot?#iefix') format('embedded-opentype'),
url('font.woff') format('woff'),
url('font.ttf') format('truetype'),
url('font.svg#icomoon') format('svg');
}
Both examples work and icons are rendered correctly, but I have some doubts about parameters which are appended at the end of each font's url (eg: font.ext?-blabla or font.ext#blabla). What do they mean?
Do I make mistake when I use incorrect parameters at the end of the url?
The reason of asking question: I want to make SASS mixin, that help me easily include custom fonts generated by different resources (icomoon.io, fontello.com etc).
Icomoon appends query string parameters (everything after the ?, in this case -w9xgwa), to either distinguish the font you were served from others generated, or more likely, to break the cache when your font is updated. Your font when served to users is likely cached (so they don't have to download it each time they view your page). Appending the query string, and changing it will cause the user agent to download it again.
I would recommend hard-coding the css generated by icomoon, and changing it when you update the font. If you don't plan on ever changing it (or needing to break the cache of a user viewing your font), then your probably fine using the mixin generated version.
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
I am very confused by an issue I am seeing on my production site.
When I access the site via "www", everything looks like expected and matches my local development environment. The css is spot-on.
But if I access the same site with just the domain name the fonts kind of become larger and the site becomes ugly. Has anyone experienced a similar problem?
Maybe I am missing something as 100 things are flying around for me right now.
The urls in question:
http://www.connect4fitness.com
http://connect4fitness.com
And, yes the DNS entries are correct. Both urls should be serving the same pages!
I'm guessing you're just viewing at the wrong zoom level. What browser are you using? In the version where the fonts are large, make sure you're veiwing at 100% zoom level (generally this is done by hitting Ctrl+0 (that's a zero) or zoom in and out with Ctrl+(either plus or minus +/-). Most modern browsers remember your last zoom level for a specific site, and do differentiate between sub-domains, so you you zoomed in at some point it will remember it only on the http://connect4fitness.com.
If you're using #font-face rules in your CSS, the path(s) to the fonts have to match the domain from which they're requested — this is referred so as the same origin policy.
For example, if you're viewing this page:
http://example.com/about
and the fonts are being served via CSS from:
http://www.example.com/css/screen.css
You'll encounter the same origin policy and the browser will not download the font files (since the fonts specified in the CSS are being served from a different domain. Remember, sub-domains such as www are technically considered a separate domain).
To easiest way to fix the problem is to link to your fonts in your CSS using relative (../) or absolute paths (/), and avoid using your site's FQDN if at all possible..
Good (Relative):
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/webfont.eot');
src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/webfont.woff') format('woff'),
url('../fonts/webfont.ttf') format('truetype'),
url('../fonts/webfont.svg#svgFontName') format('svg');
}
Best (Absolute):
#font-face {
font-family: 'MyWebFont';
src: url('/fonts/webfont.eot');
src: url('/fonts/webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/webfont.woff') format('woff'),
url('/fonts/webfont.ttf') format('truetype'),
url('/fonts/webfont.svg#svgFontName') format('svg');
}
Bad (FQDN):
#font-face {
font-family: 'MyWebFont';
src: url('http://example.com/fonts/webfont.eot');
src: url('http://example.com/fonts/webfont.eot?#iefix') format('embedded-opentype'),
url('http://example.com/fonts/webfont.woff') format('woff'),
url('http://example.com/fonts/webfont.ttf') format('truetype'),
url('http://example.com/fonts/webfont.svg#svgFontName') format('svg');
}
Has anyone come across something like this exclusively in Chrome 10/Win?
All the non-breaking spaces in these two webfonts aren't rendered properly. Working in IE7/8/9, Firefox, Safari, and Chrome/OSX.
Contents of my fonts.css file:
#font-face {
font-family: 'Hellenic';
src: url('../fonts/eot/hellenic.eot?') format('eot'),
url('../fonts/ttf/hellenic.ttf') format('truetype'),
url('../fonts/woff/hellenic.woff') format('woff'),
url('../fonts/svg/hellenic.svg#MCMHellenicWide') format('svg');
}
#font-face {
font-family: 'Lasalle';
src: url('../fonts/eot/lasalle.eot?') format('eot'),
url('../fonts/ttf/lasalle.ttf') format('truetype'),
url('../fonts/woff/lasalle.woff') format('woff'),
url('../fonts/svg/lasalle.svg#FilmotypeLaSalle') format('svg');
}
#font-face {
font-family: 'LeagueGothic';
src: url('../fonts/eot/leaguegothic.eot?') format('eot'),
url('../fonts/ttf/leaguegothic.ttf') format('truetype'),
url('../fonts/woff/leaguegothic.woff') format('woff'),
url('../fonts/svg/leaguegothic.svg#svgFontName') format('svg');
}
It is highly likely that the webfont is not assembled properly.
I have downloaded CaviarDreams font which is used on Sebastian's site and got the same bug.
Then I downloaded it from here: http://www.dafont.com/caviar-dreams.font, used fontsquirrel.com's typekit generator, and the result was perfectly fine.
Try encoding them using fontsquirrel.com Typekit generator I am not sure what the problem is, but it might help.
Try this from a previous StackFlow question. Refer to the htaccess part, not the beginning:
font-face with wrong MIME type in Chrome
Also refer to this ticket with Google:
http://code.google.com/p/chromium/issues/detail?id=72727&q=%40font-face&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
Last resort: re-generate your font with Font Squirrel.
I commented on this question before and just found some extra information for people having trouble with the boxes and spaces with 'X' for line breaks, end of line and space characters in Chrome, Internet Explorer and Firefox. Yes, sometimes regenerating the font files improves things but then I noticed my problems largely went away when I added unicode characters for spaces and new lines. Paste the following into the Unicode Ranges field on FontSquirrel when generating your fonts:
0085, 000A, 000B, 000C, 000D, 2028, 2029
For good measure I also type a spacebar into the Single Characters field.