#Font-face not showing capital "A" in some browsers - html

Strange problem here. I'm using #font-face for a site and am having some issues. I initially wasn't getting capital "A"s to show up in Chrome on Mac. After setting a font-weight explicitly, anything above 300, it was fine.
Now, however, I'm seeing that it occurs in Firefox and on my clients machine in various browsers.
Here's my code:
#font-face {
font-family: 'Avenir';
src: url('../fonts/tricky.eot');
src: url('../fonts/tricky.eot?#iefix') format('embedded-opentype'),
url('../fonts/tricky.woff') format('woff'),
url('../fonts/tricky.ttf') format('truetype'),
url('../fonts/tricky.svg#ModernPictogramsNormal') format('svg');
font-weight: 300;
font-style: normal;
}
You can see it live here: http://infirmaryhealth.mdidev.com/
Thanks for any assistance-

Got the issue figured out.
I was using Zurb's Foundation framework. They have this applied to h1 to h6:
text-rendering: optimizeLegibility;
Commented it out and voila!

Try setting the font-weight to normal (that's the same as setting it to 400). It's what the fontsquirrel #font-face generator does after converting fonts and it works for me all the time.

Related

Hidden text in Internet Explorer

I have a problem which I'm pretty sure I've seen before but I could find the solution anyway.
I've built a website, http://kefwithjeff.org, and it looks not bad on Chrome and Firefox:
But, for some reason, when I open it on Internet Explorer 8, Most f the text is invisible:
What is causing that problem? How can I fix that?
Your font format (woff) is not supported by IE8 http://caniuse.com/#feat=woff
You have to download font and add it in your CSS file.
#font-face {
font-family: "Droid Sans";
src: url('DroidSans-webfont.eot');
src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('DroidSans-webfont.woff') format('woff'),
url('DroidSans-webfont.ttf') format('truetype'),
url('DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-style: normal;
}

why #font-face in ie10 so difficult

Like others I am having problems using custom fonts in InternetExplorer. Now, I have seen a number of threads on the topic, all of which end up in a solution where I need to not only embed the trueType font (which is enough for all other major browsers) but something similar to this is suggested:
#font-face {
font-family: "LCD";
src: url('/Public/Fonts/quartz_regular-webfont.eot');
src: url('/Public/Fonts/quartz_regular-webfont.eot?#iefix') format('embedded- opentype'),
url('/Public/Fonts/quartz_regular-webfont.woff') format('woff'),
url('/Public/Fonts/quartz_regular-webfont.ttf') format('truetype'),
url('/Public/Fonts/quartz_regular-webfont.svg#quartzregular') format('svg');
font-weight: normal;
font-style: normal;
}
Could someone explain to me why InternetExplorer requires my font in trueType, webFont, svg AND embeddedOpentype in order to work?? Such a hassle...
Try using this. It seems to have helped others out. It doesn't work with all fonts, but go ahead and give it a try.

Chrome svg-Font-Rendering breaks Layout

I'm currently working on a little Project in which I'd like to use webfonts via #fontface.
I implemented the font's like this:
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
font-weight: normal;
font-style: normal;
Now as you have probably experienced Chrome has problems displaying these fonts in a smooth way.
After some searching I found a solution which seem to work: You simply move this part of the css:
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
So you end up with this:
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
Now Chrome renders the Fonts in a smooth way, which is great.
BUT:
For some reason this SOMETIMES breaks the Layout. About each third time I load the page I'll get something like this:
Everything is moved to the left. Longer texts are breaking out of their containers. Looks really strange.
**Has anyone experienced this problem before?
I would be happy to get advice on this.**
Feel free to take a look for yourself:
View Fireflycovers.com online
Thanks a lot!
I have had this exact issue happen to a website of my own.
Instead of putting the svg at the top, keep the original formatting but add a media query as shown below. This will make chrome render the fonts perfectly and fixes the layout breaking.
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.eot');
src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Cardo104s-webfont.woff') format('woff'),
url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'CardoRegular';
src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
}
}
I have seen the same issues (or worse) across a few sites. Most of the time the text is smashed together on top of itself.
My only solution at the point is to go back to the older font. You can also try to add the CSS rule: -webkit-font-smoothing: antialiased; for a small improvement.
The fix is in the duplication of the #font-face rule.
You don't necessarily need it in a media query in the Quka's answer, though that's a nice way to only target webkit browsers.
If you duplicate your #font-face declaration exactly as (svg first for better rendering), and paste it below the original, the funky layout/draw issues are gone.
Just calling out that the media query isn't important here—it's the duplicated rule. This is such a weird bug. So dumb.

Using Entypo #font-face not working in IE8 or later?

I just started using Entypo font-face to make my social icons, but in IE8 or later, it displays the font as an empty box. I don't know if there is something wrong with my code or their font.
#font-face {
font-family: 'entypo-social';
src: url('entypo-social.eot');
src: url('entypo-social.eot?#iefix') format('embedded-opentype'),
url('entypo-social.woff') format('woff'),
url('entypo-social.ttf') format('truetype'),
url('entypo-social.svg#svgFontName') format('svg'); }
.social_font a{
font: 47px/20px 'entypo-social', Arial, sans-serif; }
Entypo does not work in IE8. i just visited their website in IE8 and their demos are completely broken.
This is the code i've been using for font-face:
#font-face {
font-family: 'ChunkFive';
src: url('ChunkFive.eot');
src: url('ChunkFive.eot?#iefix') format('embedded-opentype'),
url('ChunkFive.woff') format('woff'),
url('ChunkFive.ttf') format('truetype'),
url('ChunkFive.svg#font') format('svg'); ;
font-weight: normal;
font-style: normal;
}
you could take a llok at this.
http://css-tricks.com/snippets/css/using-font-face/
By the way: font-face Do works in IE8.
Try to use http://fontello.com/ - choose the entypo icons you need and download their package.
That worked in IE7+ for me.
Double check you’ve not got IE’s Compatibility View selected. Just wasted over an hour without checking and it works fine when de-selected.
Also if you’re using html5shiv, try placing it after your css file containing the fonts.

Myriad Pro Regular font is too wide in IE7 and IE8

In my previous question:
#font-face - how to make it work on all browsers
I was asking a way how make #font-face to work on all browsers. Mainly the answer was to use this:
#font-face {
font-family: 'Name';
src: url('location.eot');
src: url('location.eot#iefix') format('embedded-opentype'),
url('location.woff') format('woff'),
url('location.ttf') format('truetype'),
url('location.svg#Name') format('svg');
font-weight: normal;
font-style: normal;
}
Generally it works. I see that even IE7 and IE8 get the font style even if here it is clearly stated:
Note: Internet Explorer 8 and earlier versions, do not support the #font-face rule.
But only problem I have is with Myriad Pro Regular font type. In IE7 and IE8 it is much wider then in all other browsers and it totally breaks my design moving out some text fragments from boundaries, changing the line and so ... How to fix also this problem?