For a project I download a template. In its style.css font family was defined as
body {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}
arial , sans-serif, Helvetica Neue are different font families then why font-family in css is defined as above.
Not all browsers support all the fonts.
So, giving multiple font families select the font that is supported by the browser, starting from the first font. If first font is supported then it is used, otherwise it checks if next font is supported and so on. The leftmost font that is supported is used.
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
In this case, Lato is not supported by all browsers. So, next font Helvetica Neue is checked.
You'll also notice that the last fonts are common, that are supported by all browsers Arial and sans-serif in this case.
FROM MDN
The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a #font-face at-rule.
Web authors should always add at least one generic family in a font-family list, since there's no guarantee that a specific font is installed on the computer or can be downloaded using a #font-face at-rule. The generic family lets the browser select an acceptable fallback font when needed.
It is a kinda like a backup if the browser won't support the first font it jumps
to the second
From W3 schools
The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
There are two types of font family names:
family-name - The name of a font-family, like "times", "courier", "arial", etc.
generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
http://www.w3schools.com/cssref/pr_font_font-family.asp
Related
Title isn't accurate but I guess good enough.
Synopsis: Company product uses bootstrap and our default font has been set to a specific free font; so all #site-font, #site-font-bold, etc are all pointing to specific woff files.
We have clients that we customize for. One client wants Arial font for most everything. I cannot seem to set #site-font-bold to Arial Bold - it displays Times New Roman.
How can I set all the #site-font-xxxx variables to various Arial fonts?
I used this for bold:
#site-font-bold: "Arial Bold";
Is it that Arial Bold should be something different? I tried ArialBold - no luck.
You can't specify Arial Bold as a font because the Bold variant comes under the Arial family and will be chosen by the browser when you have a font-weight: bold or similar property. I don't know what generator you are using but try setting Arial as the value for #site-font-bold and see if the bold text is displayed correctly.
Could someone clarify why the below font style settings is not working in chrome, but working in IE and FireFox.
My website has the same problem, it does not pick up the CSS font settings (where normal is mentioned), hence I tested with the CSS test environment from W3Schools and the behavior is same.
CSS Snippet:
Working only in IE/FireFox: font-family: Arial, Helvetica, sans-serif normal;
Working in All Browsers: font-family: Arial, Helvetica, sans-serif;
Try in Chrome and IE to see difference.
body {
font-family: "Times New Roman", serif;
}
p.serif {
font-family: Arial, Helvetica, sans-serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif normal;
}
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in Arial Without Normal.</p>
<p class="sansserif">This is a paragraph, shown in Arial With Normal</p>
Below are the questions:
Could you clarify why the behavior difference between these two browsers?
How to ensure my CSS font styles are picked by Chrome and IE/FireFox (Should I remove normal from all my CSS files or is there any better way to do it)?
Arguably invalid font-family declaration
If you open your browser's inspector (Ctrl+Shift+i in Chrome) you will see that the CSS rule
p.sansserif {
font-family: Arial, Helvetica, sans-serif normal;
}
is not applied.
Per the CSS specifications, an invalid rule is ignored, and whatever would have been applied (backwards up the cascade) is applied instead or more accurately, not overruled.
The result is "Times New Roman" in this case - as seen in the "Computed Styles".
To set the font-style (-variant, -weight, -stretch or line-height (whichever you were trying to set to normal)) of text, we can either use exactly that, or use the font shorthand.
The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family...
(with caveats).
As for the difference between IE(and FF) and Chrome
Chrome recognises in the comma delimited assertion that sans-serif normal is not a font-family, whereas IE doesn't.
If you simplify the rule to:
p.sansserif {
font-family: sans-serif normal;
}
and view the result in IE, you'll see the <p> is in "Times New Roman" since, although IE accepts the declaration, it can't do anything sensible with it.
More from the specs:
...it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens.
Font family names that happen to be the same as a keyword value (‘inherit’, ‘serif’, ‘sans-serif’, ‘monospace’, ‘fantasy’, and ‘cursive’) must be quoted to prevent confusion with the keywords with the same names.
So it is recommended that a font family called sans-serif normal be quoted as "sans-serif normal".
And if a font family is using the same name as a keyword it must be quoted.
Both Chrome and IE will accept Comic Sans MS or Times New Roman etc. with or without quotes, and apply them correctly.
Chrome rejects the unquoted use of the keyword sans-serif where it finds it combined with normal, but will accept both if quoted, although it won't be able to apply that font unless it can find one with that name.
IE accepts sans-serif normal as a possibly unquoted font family name, and this is arguably correct, since the keyword is only part of the presumed family name, rather than the whole thing.
Chrome, arguably incorrectly, rejects what it presumes is a malformed assertion.
or p.font{
font-family: font;
align-text: center;
}
I'd like to use css syntax in HTML document to set the font-family to "Arial" and font-size to 0.3cm for the whole document.
I use this code:
<style>
body { font-family: Arial; font-size: 0.3cm }
</style>
I am not sure if writing only Arial is enough, or should I write something like this?
<style>
body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.3cm }
</style>
and I am also not sure if I cam use "cm" in the code, I mean it works in the browser but is it correct "code-wise" ?
thanks
font-family: Arial
This means the browser will use Arial if you have it installed on your system. If not, it will use whatever the default font is for your browser.
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif
This means the browser will use Arial if you have it installed on your system. If not, it will use Helvetica Neue if you have it installed on your computer. If not, it will use Helvetica if you have it installed on your computer. If not, it will use whatever the default sans-serif font is for your browser.
Both are perfectly valid. They just do slightly different things.
and I am also not sure if I cam use "cm" in the code
Yes, cm is a valid CSS unit of measurement.
I am not sure if writing only Arial is enough, or should I write something like this?
You can use Arial alone but It is advisable to use font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; Just is case Arial can not be used.
and I am also not sure if I cam use "cm" in the code, I mean it works in the browser but is it correct "code-wise" ?
You can use cm but It seems it is recommended only for print by w3.org,check this link http://www.w3.org/Style/Examples/007/units.en.html
The recommended units for font size are em, px, %,rem
The font-size property can accept values of type length. As of the time of writing, the exhaustive list of these types (excluding experimental units) is:
em, ex, ch, rem, vh, vw, vmin, vmax, px, mm, cm, in, pt, pc
So, yes. You can use cm (centimeters) as a unit for that property. You should be aware, though, that 1cm rarely equals one true centimeter on screen, due to differing pixel densities on various displays. If that's really what you want, you could use the mozmm unit of measurement, although it is an experimental unit that is only supported by Firefox browsers. The cm unit is used more often in stylesheets targeted at physical printed media.
The font-family property accepts a stack (comma-separated list) of font family names. The browser will use the first one in the stack that it happens to recognize (installed on the computer).
Using font-family: Arial is a pretty safe bet, since almost all computers have the Arial font, but to be safe it is best to include a couple of fall-back fonts. Quotation marks (or single-quotes) are traditionally used around multi-word font names or font names with numbers or symbols in them. It is also considered best-practice to include a <generic-name> at the end of the list. The exhaustive list of generic fonts is:
serif, sans-serif, monospace, cursive, fantasy
So, the second option you listed for font-family is a little bit more "bulletproof". It lists some fall-back options and ends with a generic font in case the client has none of the hand-picked fonts installed.
What font used when I don't have that font?
Example:
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow: 400' rel='stylesheet' type='text/css'>
<style>
body {
font: 400 30px/1.4 Arial;
}
p {
font: 700 30px/1.4 "Pt Sans Narrow", Arial;
}
</style>
</head>
<body>
<p>Example.</p>
</body>
</html>
In this example, I don't have "Pt Sans Narrow 700". What font used?
The regular typeface of the PT Sans Narrow family used, with algorithmic (synthetic, fake) bolding applied to its glyphs. In this case, the result is clearly bolder than plain PT Sans Narrow but less bold that PT Sans Narrow Bold.
CSS Fonts Module Level 3 says, in its description of font-weight: “Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces. For the purposes of style matching, these faces must be treated as if they exist within the family. Authors can explicitly avoid this behavior by using the ‘font-synthesis’ property.” (The font-synthesis property is not supported yet.)
Unless there is some very special reason to ask for “fake bolding”, despite the existence of an actual bold typeface, you should specify bold (700) weight in the element where you refer to the the Google font, as instructed by the Google documentation:
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700'
rel='stylesheet' type='text/css'>
You are using google font that means it obviously take this font. But if you haven't used google font then if the client has no such font then it would take another font that is Arial.
Consider this example:
font-family: font1,font2,font3;
Here if the client browser has no such font font1 then it will try to use font2 and if font2 is still not available then it will use font3 but if font3 is not still there the client's default font would be used there.
Arial is used if Pt Sans Narrow is not present.
When you open a HTML-File and the browser can't find the font, the normally it will use the default font of the browser.
What will happen is it will look at the declared font stack you have made:
"Pt Sans Narrow", Arial;
and see the next font in the list after the one it cant find "Pt Sans Narrow".
In this case it will be Arial.
This is highly depending on the rendering engine you are using.
Most engines make the font that is available "Pt Sans Narrow" just bold, which in turn would not look like the correct "Pt Sans Narrow" 700, but might come close.
And then there are those engines that skip an not available font and would choose the next in line, that might be Arial if it is available or the devices default font if the device also doesn't have Arial.
Introducing new font in CSS with #font-face as
#font-face{
font-family:'myCustom';
font-style:normal;
font-weight:400;
src:local('myCustom'),
local('myCustom-Regular'),
url('myCustom.woff') format('woff')
}
and defining the font as
font-family: myCustom, Tahoma, Verdana, cursive;
However, I have two problems:
Until download my custom font, it will not show the second (alternative font), and the text will be blank.
If for any reason the visitor browser does not download my custom font, it will not display any text.
How can I display the alternative font until availability of my custom font?
What I expect to happen is that the first available installed font, among those listed in the font-family list, will be used. If this does not happen, please post a URL for inspection.
But you may wish to consider the list of font families you use. The odds are that if Tahoma and Verdana would be acceptable, cursive would not be; a normal generic fallback font in this case would be sans-serif.