Why does Firefox ignore my globally specified font? - css

Hoping that it makes my pages look the same in modern browsers, I included some reset.css with the following lines
body {
*font-size: small;
font-family: arial,helvetica,sans-serif;
font: 16px/18px sans-serif;
margin: 0 auto;
}
However, the font in my Firefox 20 (for Ubuntu Canonical - 1.0) was still by a few per cent bigger than in my Chromium 25.0.1364.160 Ubuntu 10.04. Funnily, the following rule helped:
* {
font-family: arial,helvetica,sans-serif;
}
It looks like Firefox overrides the font for span, too, but I can't see it in the Web Developer Tools. It simply chooses a different font, although it shouldn't.
I've created a plunk showing it (just drop the star rule to see the change). My questions are
what's the explanation?
what's the proper way of resetting styles? Do we really need star rules just in case?

The explanation is that font: 16px/18px sans-serif sets the font family to sans-serif, which is a browser-dependent default sans serif font. It overrides the preceding font-family setting. Apparently, in your Firefox, sans-serif is mapped to a font that looks smaller than Arial, for the same font size. So the font size is the same, the letters are just smaller.
The simplest fix is to revert the order of the two declarations:
body {
font: 16px/18px sans-serif;
font-family: arial,helvetica,sans-serif;
margin: 0 auto;
}
(The *font-size hack is pointless here, since you have a rule later that sets the font size.)
Alternatively, you can combine the rules:
body {
font: 16px/18px arial,helvetica,sans-serif;
margin: 0 auto;
}
The question “what's the proper way of resetting styles?” is primarily opinion-based and also independent of the technical problem presented. Setting font properties on body isn’t really “resetting styles”, just normal styling. Technically, setting e.g. font-family on all elements has a considerable impact, and you should do that only if you really understand the impact (e.g., on form fields, on elements like code, etc.).

Related

Inherit font-family property if font not available

I'm trying to get something like this to work:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica, inherit;
}
Basically if "Helvetica" is not available on the client's browser, I want the font-family to be inherited from a parent. But it seems to me that I can't use "inherit" in a font priority list.
How can I achieve something like this without having to copy paste font-family from body?
You are correct. You can use it just like you did. This is something that became available with CSS2. This question is similar and has some answers worthy of a read.
I think the real problem is that Helvetica isn't a free font. So, it just isn't available for widespread use.
Option 1) If you own the Helvetica font, make an image using that font
(for the few lines that you want that specific look for).
Option 2) (as #bjupreti suggested) is to use a substitute font that is widely
available.
Font family will automatically be inherited from the parent property. So, all you have to do is:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica;
}
This will automatically inherit the font family of body if there is no Helvetica in end users computer.

Force webpage to use a specific font

I have created a question mark button using the Arial font.
The CSS looks like this:
.question {
font: bold 24px Arial;
}
It appears correctly on almost all browsers, as this screenshot shows.
However, newer versions of Android use the Roboto font face instead of Arial. The question mark is now off-center and the wrong width.
My question: is it possible to force the browser to use Arial?
You cannot force a device/computer which doesn't have Arial installed to use it. You would have to rely on webfonts to use Arial everywhere.
Also, your syntax is wrong, you should be using the shorthand property font, and not font-family (which is only used to specify the font face and potential fallbacks), like so:
.question {
font: bold 24px Arial, sans-serif;
}

Why 2.8em is divided by 1.2?

I'm new to CSS and I'm trying to learn the concept of font. I saw this code online, I understand by default 1em = 16px but I don't understand why 2.8em is divided by 1.2? What is the reason behind it or is it unnecessary?
h1 { font: 700 2.8em/1.2 "Droid Sans", sans-serif; }
That is the short-hand font syntax for defining both font-size and line-height; specifically a font-size of 2.8em and a line-height of 1.2. You can consult the MDN on the font CSS property for more details.

Fonts looks different in Firefox and Chrome

I am using Google Web Font's PT-sans
font-family: 'PT Sans',Arial,serif;
but it looks different in Chrome and Firefox
Is there anything that I need to add so that it looks same in all browsers?
For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.
For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:
#font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:
function setBrowserClasses() {
if (true == $.browser.mozilla) {
$('body').addClass('firefox');
}
}
Then in my CSS, I can say
body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:
body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
There are a few fixes. But usually it can be fixed with:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Sometimes it can be due to font-weight. If you are using a custom font with #font-face make sure your font-weight syntax is correct. In #font-face the idea of the font-weight/font-style properties are to keep your font-family name across different #font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").
I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.
css reset may fix the problem, I am not sure .
http://yuilibrary.com/yui/docs/cssreset/
I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother.
There is nothing you can do about it. good luck
To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.
i found this to be working great :
-webkit-text-stroke: 0.7px;
or
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
experiment with the "0,7" value to adjust to your needs.
The lines are added where you define the bodys font.
here is an example:
body {
font-size: 100%;
background-color: #FFF;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
font-weight: lighter;
-webkit-text-stroke: 0.7px;
As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.
To fix this, you can do the following:
First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:
https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js
Now that you can target a Browser/OS, create the following 'new' font:
#font-face {
font-family: 'Custom PT Sans';
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
font-weight: normal;
font-style: normal;
}
The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.
Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext
You may also rename your #font-face custom font-family alias.
Create a simple CSS rule to use that font targeting Browser/OS or both:
.mac .navigation a {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Or
.mac.webkit p {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Done. Just apply the font-family rule wherever you need to.
Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).
I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.
Set "Accelerated 2D Canvas" to "Disabled"
(In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)
Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.
On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.
The new fix (for me) appears to be:
Settings -> Show advanced settings... -> System
UNCHECK "Use hardware acceleration when available"
https://superuser.com/questions/821092/chromes-fonts-look-off
The issue might be more what we don't set in our CSS than what we do set.
In my case, FF is showing text in the default Times New Roman, while Chrome uses Montserrat as expected.
This happens to be because in Chrome I set Montserrat as the default, while FF has no default.
So, I think that some browser differences are rooted in the browser's configuration rather than in my CSS.

What fonts to use when designing xhtml pages via CSS for mobile phones?

Firstly I plan to CSS to style pages (with fluid layouts) which are targetted towards mobile browsers.
<style type="text/css">
body {
background-color: #000;
color: #fff;
font: normal 95%/130% "Trebuchet MS", Verdana, Arial, sans-serif;
margin: 0;
padding: 20px 0;
}
</style>
What values should I put in the font property ? (Forgive me, but I am a CSS newbie, is font referred to as a property of the body element ?) It is obvious that mobile devices will not have a common fontface, so should I just leave it empty?
Mobile devices cover thousands of devices. Some devices come with only proprietary fonts (like BlackBerry), and some devices come with limited font support. The only safe way to specify fonts is to use the generic font families and let the device choose the best match.
http://www.w3.org/TR/CSS2/fonts.html#generic-font-families
Just make sure to specify a default font family (like sans-serif or monospace) so that the page degrades nicely even if all fonts you specify are unavailable.
Apple uses Helvetica, so if you want the Apple look, you could declare that in your font-family array. However, not all mobile devices will have Helvetica, so you'll definitely want to declare at least sans-serif at the end of the array. Here's a string using what at one point were the default sans-serif fonts for the major handheld platforms:
body {
font-family: Helvetica, "Droid Sans", Prelude, BBMillbank, "Microsoft Tahoma", sans-serif;
}
Of course, if you just declare sans-serif I'm guessing you'd get these as default anyway. (I'd love to be able to test on all platforms directly. Emulators get you only so far.)
Mobile devices should have most of the basic font faces that browsers have available. They're still rendered on a screen, so its important to use a non serif font (Verdana, Arial are good choices). Usually, you put in the CSS a multiple of font faces in an "order of preference"

Resources