On the site http://hanling.focusww.com
The header text in the h2 tags is huge in IE 9 compared to Firefox, Chrome, or Safari.
I'm looking for suggestions to fix this.
This is a wordpress site.
(this post was migrated from the Wordpress Stack exchange)
Suggested answer:
if you do migrate check this out for a possible answer.
Seems IE9 doesn't play nice with all fonts so you might want to supply your own for IE9 to read see here https://github.com/twitter/bootstrap/issues/3116 and here #font-face works in IE8 but not IE9
Seems like a font-weight issue
response:
We are not embedding any fonts.
The answer lies within your font-family declaration:
font-family: Bookman, serif;
If Bookman is not found, the browser falls back to the next available font in the chain. In this case you only have one fall back and that is set to serif.
The issue is that Firefox is falling back to its default serif font: Times New Roman, and IE9 is falling back its default serif font (which is different): Batang. You can sort this issue out by changing the declaration to something like:
font-family: Bookman, "Times New Roman", serif;
So now it would fall back to Times New Roman first, and if that font is not available then it will fall back to serif which will be the browsers default serif font.
Related
I'm having an issue where font-variant: small-caps isn't rendering correctly in Firefox. Any other browser is fine. I'm stuck with this particular font, and even this particular definition of the face due to its license.
How it looks in Firefox:
How it's supposed to look (from Chrome):
Is this a problem with the encoding of the font? Is there a work-around?
The issue is presented in full in this jsFiddle. (Base64-encoded font was too big to put all in the question.)
The font is broken for those characters. Other browsers fallback to the next font in a different way from Firefox. You can see this by providing an obviously different font as the second font in the font-family. For example, in this JsFiddle, Wingdings is used as the first fallback font. i.e.
body { font-family: "THAT-FONT", Wingdings, "Open Sans", "open-sans", Sans-Serif; }
https://jsfiddle.net/rnwvpfy1/2/
See how Chrome displays that, showing that it's not using the "THAT-FONT" font for the broken characters.
I'm having a problem with the display of Helvetica in IE. I first noticed this issue in IE8, but it's continued after upgrading to IE11. When a site is set to use Helvetica, I'll get strange extra characters (using looking like a cross) overlapping other text. If I look at the site in any other browser, the text displays just fine.
My best guess as to what is going on is that I have a wonky version of Helvetica that IE is using. But when I look in Windows>Fonts, I have a lot of them that include the word "Helvetica". How can I tell which font IE is using? Am I on the right track in thinking it's a font file issue?
Here's a page that's not working right, and a screenshot of what I see: http://gorowe.com/pages/get-assessed
To debug the situation I recommend playing with the font-family declaration and fallbacks in the CSS.
So for example, start with a generic font-family like this:
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
Verify that the problem exists, then try eliminating the Helvetica entry like this:
font-family: Arial, "Lucida Grande", sans-serif;
If the problem still exists, you know that this is not an issue with Helvetica itself. If the problem goes away, you know that Helvetica is the culprit.
If Helvetica itself is causing problems, I would double check the problem exists in all relevant IE versions (at least 9, 10, 11) and operating systems (Vista, 7, 8). Then continue debugging the problem like you would for other IE issues.
EDIT: If you are using webfonts, definitely double check that you are using the recommended font-family declarations for that file. Usually you can just open them up in a text editor and you will see the declaration. You will also need to follow best practices for declarations and fallbacks. Here is a relevant example: Getting web fonts to work in IE10
EDIT 2: This syntax assumes the machine has Helvetica installed as a system font. You might want to research the safety of this assumption. More info here: Internet Explorer automatically switches to compatibility mode (IE9 and IE10)
I have two website hosted on different server, there are elements that i have set the same font-family as 'TheSans', I am sure they both are not overwritten, the 'theSans' is the real and final value in css, but the font of these 2 pages just look differently with same browser. I checked on my pc and found that I don't have this 'theSans' font installed, so what actually happened there?
if the browser does not find the font, what font it will use? why the behavior is different in same browser.
If a browser doesn't have the font, it will fall back to the other options specified in the css font-familyrule. If no addition options are specified it will just use its default. eg. below it will use Helvetica if installed, if not it will use arial, if no arial it will just pick what every sans-serif font it has
font-family: Helvetica, arial , san-serif;
Link about font-family
Now that being said, wouldn't it be nice to give the browser the font if it doesn't have it? And that is where the #font-face CSS rule comes in
related question here
About #font-face
I'm using the Google Web font "Buenard" and having a difficult time getting it to display on Chrome. I know there are issues with font rendering and hinting across the various browers, but this is something else altogether. Instead of the intended font, Chrome is displaying some other dingbat font on my system. It looks great in Safari.
I can't share a link, because the site in question is behind a protected login. However, check out this screenshot to see what I'm looking at:
http://bit.ly/ImiiDM
In the CSS, I am using a font stack of '"Buenard", Georgia, "Times New Roman", serif;' I tried also just using '"Buenard", serif;' No effect.
Any ideas?
Instead of using stylesheets to attach the font just search the web for your desired font and download it and attach it like so:
#font-face {
font-family: buenard;
src: url('buenard.ttf');
}
After that you can use it just like a normal CSS declaration:
p.custom_font{
font-family: buenard; /* no .ttf */
}
I have the following problem with Firefox 3.6 on Mac. Windows and older versions of FF work perfect.
The body is defined like this:
body {color:#000;font:normal 12px/16px "Cambria", Times, Times New Roman, Georgia, serif;background:#fff}
But my h1, h2 and some other tags (sometimes a list item is in the right font, sometimes it isn't) are in Verdana (wrong should be Camrbia) font... I don't know why... The standard FF font is Times... My other texts are in the right Cambria font.
Even when I remove the stylesheet the same tags have the wrong font, they should be Times but they are Verdana -> Very strange no?
PS: I'm sorry but I can't post the whole stylesheet...
You have to set font families on h1, h2, etc. tags too. Also you have to write font-families in quotes if the font name consists of more words:
h1 {font-family:Cambria, Times, "Times New Roman", Georgia, serif;}
I suggest you to install Firebug plugin for firefox and see which styles are being applied to your tags. Also check if there is not another stylesheet that is being loaded in the header.