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.
Related
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.
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
I want to make Kannada website in that I have lot of content so that till now I'm using google kannada translator to add but now the content is more so is their any way to do embed kannada font I tried this link http://www.google.com/fonts/earlyaccess but I couldn't get it.
I tried like this:
#import url(http: //fonts.googleapis.com/earlyaccess/notosanskannada.css);
font-family: "Noto Sans Kannada Regular", serif; font-size: 19.0px; line-height: 1.11em;
There are three problems with the code you’ve used: a space in the URL of the Google CSS file (URLs must not contain spaces), the font name Noto Sans Kannada Regular (the Google CSS file defines Noto Sans Kannada), and the appearance of the font-family declaration as such (it must appear within a CSS rule, consisting of a selector, the { character, a declaration or declarations, and the } character). The following works:
<!doctype html>
<meta charset=utf-8>
<title>Kannada test</title>
<style>
#import url(http://fonts.googleapis.com/earlyaccess/notosanskannada.css);
body { font-family: "Noto Sans Kannada", sans-serif; font-size: 19.0px; line-height: 1.11em; }
</style>
Hello world!
<p>
ಮುಖ್ಯ_ಪುಟ
The last line of the sample code is Kannada text and may or may not be legible here, depending on fonts installed in your system. On a web page, it will be legible thanks to the use of a downloadable font (via the Google CSS code) – unless the user has denied the use of downloadable fonts, which is rare.
I changed serif to sans-serif, since it is illogical to use a serif font as fallback font when the primary font is a sans serif font like here.
Note: Normal text will appear in regular typeface of Noto Sans Kannada, and bold text (as in headings by default) in bold typeface of Noto Sans Kannada. You should not use italic (like em element) for elements that may contain text in Kannada to be displayed using this font. The reason is that Google does not provide an italic typeface (as you can see by looking at its CSS file), and this makes browsers generate “fake italic” by algorithmically slanting glyphs, which is bad typography.
My text that is supposed to be Arial Black is not working on Firefox. It's just displayed as a regular text. So I used Arial font with the Strong tag. I can't make a difference between the way they look. Is there anything I should worry about?
Thank you
EDIT
In this particular case I can't use CSS to do it so that's how i did it:
<font face="Arial Black, Arial, sans-serif"> <strong>Want an undergraduate course with more opportunity for hands-on practice? </strong></font>
Thanks for all the answers and explanations, I believe the strong tag is not wrong here as this is the most important part in the whole message. The visual difference wasn't noticed by anybody, that's confirmation enough for me.
I posted in jsfiddle and it surprised me the strong tag didn't add the bold effect i was expecting! The b did. You can clearly see the difference there! Thanks for that suggestion!
With regard to the question title (as the question text seems to ask differently):
The <strong> tag carries a semantic meaning. Citing MDN on this
The HTML Strong Element () gives text strong importance, and is typically displayed in bold.
So in the first place you should use this tag so mark up content, that you want to emphasize and not to get text marked bold.
Most browsers, however, will implement that emphasizing as just bold printed text.
If you just want to have bold text, use the respective CSS for it!
font-weight: bold;
<strong> holds a certain semantic meaning (along the lines of "more important"), and as such should be avoided purely to style something. If you want to "bold" the text, just add font-weight: 700.
Or you know, fix the reason Arial Black isn't working :P It may be that you didn't add speech marks around Arial Black.
font-family: Arial;
is completely acceptable, but
font-family: Arial Black;
is not. Make sure you have
font-family: "Arial Black";
Yes, there is a considerable difference in using Arial Black vs. Arial with the strong element. I will answer in CSS terms, substituting the CSS setting font-weight: bolder for HTML strong markup. (It's really irrelevant here whether you call for bold face directly in CSS or indirectly with HTML markup that implies a certain default setting.)
It is not clear what you mean by “Arial Black is not working on Firefox”.
The most logical CSS code for the purpose would be:
font-family: Arial; font-weight: 900;
This asks for the boldest available font in the Arial font family; that’s Arial Black when available, or else Arial Bold. Firefox does not seem to support this quite consistently, but many browsers have even more serious problems with font heights. (E.g., Chrome shows weight 600 as bolder than 700.)
In practice it is safer to use the old kludgy way, which refers to a specific font (typeface) as if it were a font family:
font-family: Arial Black;
For example, on IE 8, this is the only way to get Arial Black, whereas IE 9 supports the logical way, too (in “Standards Mode”).
If you use set the font to Arial and font weight to bolder, you get Arial Bold. If you set font-family: Arial Black and font-weight: bolder, you get Arial Black, because there is no bolder font. And Arial Bold and Arial Black are very different.
It’s impossible to say what went wrong in your first attempts, as you did not post the actual code used.
I think you would receive the same effect, however I would recommend using CSS styling instead of using the strong tag.
.arial-black{
font-family: Arial;
font-weight: bold;
}
There is no visual difference between the <strong>, <b> and font-weight:700|bold;.
However <strong> is used by screen readers (for the blind and partially sighted) to put emphasis on the text... therefore using a "bold" font will not result in the same thing for screen readers.
If you don't want to "emphasis" the text for screen readers, then I would recommend you use the <b> tag instead.
<strong> tag does not support all browsers, as Arial and Arial black is concerned both are different in size or weight you can say.
So answer to your question is yes.
Using the font Arial Black in a web page only works for the users that actually have that font installed. (Of course, using Arial also only works on systems that have that font).
Arial Black is not just a bold version of Arial. Although similar, Arial Black has a different look than the bold version of Arial:
Arial, bold
Arial Black
You should use a fallback font for all fonts that you use, so that the browser knows what to use if that specific font isn't available, however it's tricky to use a font that is bold by default, as you can't specify Arial bold as fallback for Arial Black. You would have to make do with using Arial as fallback:
font-family: 'Arial Black', Arial, Helvetica, sans-serif;
You could use a #font-face rule to force Arial Black whenever the bold font-weight of Arial is used:
#font-face {
font-family: Arial;
/* You can add other common names using comma-separated local definitions here */
src: local('Arial Black');
font-weight: bold;
}
#font-face {
font-family: Arial;
src: local('Arial');
font-weight: normal;
}
Now, whenever Arial is set as the font for an element and the calculated font weight is bold (which is what user agents set for the string tag in their html.css definitions), Arial Black is used instead.
strong tag basically creates your text in bold. For your case it makes no difference. But it will create a difference if your font is different and you are using "strong"
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.