Chrome 10/Windows #font-face encoding trouble - css

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.

Related

Font will not load on any version of Internet Explorer

I have two fonts that I wanted to include on my website for my logo, Bebas Neue Regular and Bebas Neue Thin.
I converted my fonts using font-squirrels online font conversion tool and have added the relevant #font-face code to my css:
#font-face {
font-family: BebasNeueReg;
src: url("/fonts/BebasNeueRegular.eot");
src: url("/fonts/BebasNeueRegular.eot?#iefix") format('embedded-opentype'),
url("/fonts/BebasNeueRegular.woff2") format('woff2'),
url("/fonts/BebasNeueRegular.woff") format('woff'),
url("/fonts/BebasNeueRegular.ttf") format('truetype'),
url("/fonts/BebasNeueRegular.svg") format('svg');
}
As you can see this is the #font-face css for the Bebas Neue Regular. For some strange reason the css #font-face for Bebas Neue Thin works absolutely fine in all browsers. This css is exactly the same apart from the src being different.
#font-face {
font-family: BebasNeueThin;
src: url("/fonts/BebasNeueThin.eot");
src: url("/fonts/BebasNeueThin.eot?#iefix") format('embedded-opentype'),
url("/fonts/BebasNeueThin.woff2") format('woff2'),
url("/fonts/BebasNeueThin.woff") format('woff'),
url("/fonts/BebasNeueThin.ttf") format('truetype'),
url("/fonts/BebasNeueThin.svg") format('svg');
}
I have tried multiple things such as, converting the font using different font conversion tool, swapping the order around of the url's.
Can anyone shed some light? Has anyone has this exact same problem before?
Thanks in advance.
I cleared everything and started again. Downloaded the fonts I wanted to be part of the project and then converted them to web fonts using the web font generator. I then added them back into the project and used the exact CSS #font-face that came in the zip file. This seems to have fixed things. May have been a corrupted open type font that I was trying to convert in the first place.

Difference between format('embedded-opentype') and format('eot')

I am using compass module to generate my css files from sccs files.
Earlier i was working only on Linux and the when the css file was created, the fon-face attribute looked like below :
#font-face {
font-family:"NationalReg";
src: url('../fonts/national-regular.eot');
src: url('../fonts/national-regular.eot?#iefix') format('eot'), url('../fonts/telecomnational-regular.woff') format('woff'), url('../fonts/national-regular.ttf') format('truetype'), url('../fonts/national-regular.svg') format('svg');
}
Now i am working on Windows, and the css file generated has below structure :
#font-face {
font-family:"NationalReg";
src: url('../fonts/national-regular.eot');
src: url('../fonts/national-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/telecomnational-regular.woff') format('woff'), url('../fonts/national-regular.ttf') format('truetype'), url('../fonts/national-regular.svg') format('svg');
}
Notice the difference in the format("eot") and format("embedded-opentype").
I understand that this is added for IE8 and below browsers. But will it create any problems if two different format tags are used (in windows/linux).
I have seen both values being used, but I was not able to find any documented difference.
The Microsoft #font-face documentation says (emphasis mine):
To specify specific font formats (only for externally referenced font files), use a format hint (format(fontFormat)) where fontFormat is a comma-separated list of format strings that denote supported font formats. Possible fontFormat values are "woff", "truetype", "opentype", and "embedded-opentype". The format hint is optional starting in Internet Explorer 9. (format hints are not supported in Internet Explorer 8 and earlier versions and are ignored.)
Since the .eot file format is only for Microsoft browsers anyway, I would in this case just take their word for it and use format('embedded-opentype').

IE #font-face is not working even after ?#iefix is in place

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...

WebFont shows uppercase or lowercase in different browser

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.

#font-face onle affecting certain characters

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;
}

Resources