I am having a little issue with a font in Chrome. I think it's the way I'm specifying it. I have:
font-family: "Myriad Pro", Tahoma, Arial;
That works well in FF, IE and Safari, but Chrome just shows me weird symbols.
Using font-family: Tahoma, Arial; works well for all the browsers, including Chrome. But I need Myriad Pro at least for IE, FF and Safari, how can I achieve this?
Thank you!
Myriad Pro is NOT a web font. Because of this, Myriad Pro is not available in all browsers (also, not all computers have the font installed), you are going to end up with a lot of visitors who will only see Tahoma.
Try using #font-face. I recommend FontSquirrel's #font-face Generator. All you have to do is upload your font, then it generates the files and CSS you need to get a pretty consistent looking font in nearly all browsers, even IE6!
Remove Myriad font from stack in css. Refresh your page. Then add this font back to your stack again and refresh your page. I don't know why, but it worked for me.
Are you on a mac? I found this: http://www.mactalk.com.au/56/83001-font-issue-google-chrome.html
"Myriad Pro", Tahoma, Arial;
should it not be
"Myriad Pro", Tahoma, Arial, sans-serif;
This also might be case of the browser for some reason not being able to access the Font. Happened before for me on Opera, it would only be able to access a few fonts, but none of the special fonts I tested that other browser could see just fine. Updates \ reinstall never resolved it for me, but after upgradin from Vista to 7 the problem went away.
Related
I'm working on this site and I have this CSS
.n2-font-d7df9860b9d2e958d0b5b8dadd6b6bd5-paragraph{
font-family:'HelveticaNeue', 'Helvetica Neue', serif !important;
}
This targets the text on the front page image (please don't ask about the selector - its generated by a plugin!). I need to use the Helvetica Neue font and I believe its supported in iOS (iosfonts.com). It looks fine on desktop browsers, but the font-family is ignored on iOS (in Safari) and renders as a flat sans-serif font.
I've tried listing various alternatives but with no success. I am using iOS 9.2.1 which is the latest.
Can anyone say why I'm having this issue? And how to make it apply the correct font? I'm about ready to smash stuff... Thanks for any advice.
I am currently using Helvetica Neue on a website that I am developing. Over the past few months, I have noticed that the Helvetica Neue font renders extremely bold in Google Chrome. When viewing the same site in Firefox, everything looks much better, and as expected.
Here's a comparison screenshot for reference:
The CSS rule for this portion is fairly straightforward:
#top-bar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 30px;
color: #ccc;
font-size: 80%;
line-height: 30px;
}
#top-bar a {
color: #eee;
}
Can anyone explain why the font looks so different in the two browsers? It almost looks like Chrome is rendering a heavier font weight, even though font-weight: normal has no effect. This is not unique to this site, either. Any site (including Bootstrap Docs) that uses Helvetica Neue suffers this on my PC (and others running Chrome). Everything looks fine on a Mac.
Is there a solution? Some technique to mimic FF's rendering of the font in Chrome, for example?
This is because Firefox supports the hardware-accelerated DirectWrite API (part of Direct2D) to render fonts and Chrome doesn't. See for example:
Chrome Issue 25541
Chrome Issue 124406
Even if you switch off hardware acceleration in Firefox, the results are different because both browsers use different font rendering backends.
I'm developing a website that uses the Gill Sans font. So far it displays properly on Chrome and Firefox, but not in IE. Here's the css:
#font-face {font-family:"Gill Sans";
src:url(../../GillSansStd.otf);}
#font-face {font-family:"Gill Sans";
font-weight:bold; src:url(../../GillSansStd-Bold.otf);}
#font-face {font-family:"Gill Sans";
font-style:italic; src:url(../../GillSansStd-Italic.otf);}
I tried converting the .otf to .eot and adding a conditional statement for IE, but I couldn't get that to work either. I don't know much about fonts so please excuse me, but I'd really appreciate it if someone could help me out.
When using FONT types that consist of two words, quotes must be placed on them so the browser does not read them as separate entries.
#font-face {font-family:""Gill Sans"";
src:url(../../GillSansStd.otf);}
#font-face {font-family:""Gill Sans"";
font-weight:bold; src:url(../../GillSansStd-Bold.otf);}
#font-face {font-family:""Gill Sans"";
font-style:italic; src:url(../../GillSansStd-Italic.otf);}
More examples can be found here: CSS Font Styles
See fonts.com info on using Gills Sans as web font.
Note that a normal license for the Gill Sans font does not allow use as web font, and some browsers may enforce this legal restriction as a technical limitation.
This works fine in Firefox and IE9
font-family: "Arial Rounded MT", Arial, Helvetica, sans-serif;
But not in Chrome, Safari, IE 8 & 7 and Opera. In those browsers it defaults to just Arial.
Is there a way to use the arial rounded mt font in those browsers?
Note: I am testing this on the same computer which has the arial rounded mt font installed.
Try using it's postscript name - though it's off spec, some browsers will use it anyway (I know for sure Safari does, not sure about the others).
In this case, the ps name is ArialRoundedMTBold, so try:
font-family: ArialRoundedMTBold, "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
If you're going to use un-web friendly fonts then other users who visit your website will not see the fonts unless they are installed on their computer as well.
You are best by looking into using either...
Font Face
Or
Cufon
...as these will allow all visitors to your website to see your custom fonts.
I have a lot of CSS that does the following:
font-family: Helvetica, Arial, sans-serif;
It my understanding that Helvetica is the default sans-serif font on Mac and Arial is the default sans-serif font on Windows ... if that's the case, couldn't I just change the above code to be:
font-family: sans-serif;
Yes, no?
The default font really depends on the browser. For example, in Firefox on Mac, I have Lucida Grande as the default sans-serif font. I don't think I changed it, but I'm not entirely sure. You can't really depend on the defaults being specific fonts, as users can change them in the preferences. If you want a specific font, specify it.
Helvetica on Windows XP looks horrible due to its poor rendering. Luckily, only a few people have Helvetica installed on Windows XP (because if they care about Helvetica, they’ll probably be using a Mac).
This is safer:
"Helvetica Neue", Arial, sans-serif;
That way, pretty much only Mac OS X will pickup Helvetica Neue (standard on OS X) and Windows can ignore it and move straight into Arial.
With fonts, you want to be as specific as possible to prevent layout issues. Your page may look perfect on a machine with Arial as the default sans-serif font, but if someone has a very different font as their default, it can affect spacing of elements (if you use relative measures). Plus it makes any designer on the project angry when they see the wrong font, and you don't want that.
What do you want to happen on platforms that have
Helvetica or Arial installed and
a default sans-serif font that is neither of those?
Or asked differently: do you always prefer Helvetica or Arial over the default, if they are installed? If you prefer the default sans-serif font in all cases, why mention those two at all?
Helvetica is sometimes the default sans on Mac, but to be honest it's not a great screen font.
Geneva, Lucida Sans, and Trebuchet MS are good alternatives.
You can be pretty certain that Helvetica is installed on machines running Mac OS X, because that font is used in a number of official applications designed by Apple. Arial is also available on any machine, provided that the user hasn't deleted the font file.
But as Tom points out, it's better to be as specific as possible when defining font styles. When I want a sans-serif family displayed I usually have the following in my stylesheets:
Helvetica, Geneva, Arial, sans-serif;