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.
Related
I'm using this well known hack to make monospace fonts use the same font size as proportional ones:
code, kbd, tt, pre, samp, textarea {
font-size:1em;
font-family: monospace, monospace;
}
because the default is for browsers to use a smaller size for monospace, and different browsers use different sizes, so this trick is a way to make things look more similar across browsers.
However, I just found that this doesn't work on most Android browsers! Apparently, monospace, monospace is considered an error in Chrome based mobile browsers, and they use the default proportional font instead. (Firefox is OK.)
So, does anybody know a workaround for this? I tried variants like monospace, serif, but that didn't work either.
My testing says that you'll be ok in Chrome on Android now if you have Courier or "Courier New" (or both) in your font-family stack somewhere. You can add other fonts also and end with monospace, but you at least need one of these, apparently. Without them, you'll either get a smaller font size with just font-family: monospace, or you won't get a monospace font at all with any other font-family. Sigh.
I tested using browserstack.com screenshots for a Galaxy S7 and Nexus 6, and I've had customer complaints on later phones. Presumably this will be fixed in Chrome on Android someday.
Checkout Google Monospace fonts: https://fonts.google.com/?category=Monospace.
Use these directly on your website. monospace will try to use your system-defined monospace fonts.
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.
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.
Screenshot: http://i.imgur.com/QVBGx.png
It is pretty evident that my site renders different on Chrome and FF7 on my Win7 machine
I am using this:
h1, h2 {font-family: "Lucida Grande", "Helvetica Neue", Arial; }
Does anybody can point me how can I even these diffs? I don't want fonts with different 'feelings' on each browser.
The font, Lucida Grande is installed in my Windows machine
EDIT:
font-weight: normal !important
doesn't work either
It looks like the two browsers are rendering it with a different weight.
I can think of two possibilities, though I don't know if either are correct.
You requested a bold font, but that font is not available in bold. One browser is just showing the regular, non-bold variant unchanged, whereas the other has processed it to look bold.
You requested a particular weight of font, say "bold" or "600" but the installed fonts do not precisely match that weighting. One browser is substituting an "extra-bold" variant of font, and the other a "regular-bold", or something of this nature.
If either of these is correct you could play around with the font-weight CSS property to try and alter it. But then that may affect substitution of whichever font is chosen in the case that it is viewed on a system with no Lucida Grande font at all.
Fonts will always render slightly different from one browser to another, but that was a bit more difference than usual. Probably because the headers have font-weight: bold; as default, and the font doesn't have a bold variation so the browsers create the bold style from the regular weight in different ways.
Anyway, you might want to use more common fonts. On my Windows 7 machine there is neither Lucida Grande nor Helvetica Neue, so it would render using Arial. Still, I have the additional fonts that come with both MS Office and Photoshop, so I have a lot more fonts installed than you can expect from a standard system.
Also, you should always specify a generic font as the last resort, in this case sans serif, otherwise it would render using the default font if none of the fonts are installed, which is something like Times Roman which has a completely different look. Perhaps also adding Helvetica, which is the closest equivalent of Arial on non-Windows systems.
My website uses a rather obscure font that about half the computers can properly read. The font is "Lucida Console".
On the computers that can't read this font, they get displayed ugly Times New Roman, is there a way to set the font of my website to Lucida Console but on computers that can't read it, view Arial instead? Using CSS.
you can specify multiple fonts:
p {
font-family: "Times New Roman", Times, serif;
}
The browser will try the first one, if that one isn't available the second, and so forth. In the end it uses the family serif, so the browser chooses any serif font. You should use the monospace family.
So in your case, something like this is what you want:
p {
font-family: "Lucida Console", "Courier New", monospace;
}
Further tips:
Google css font stack for suggested lists of fonts aimed at certain styles of fonts. 'font stack' is the colloquial name for these font lists.
Think cross-platform. Consider adding fonts commonly found on Mac, Linux, iOS, Android, Windows, and other platforms your readers may be using.
Always include a generic-family name at the end of your font stack in case the user has none of your desired fonts:
serif
sans-serif
cursive
fantasy
monospace
Include quotes around fonts named with multiple words, or simply quote all font names.
You can also serve that obscure font with your website (if you are legally able to) using #font-face. It's easy and works even in IE6 :).
Read about it here: http://www.miltonbayer.com/font-face/