I recently updated my body tag CSS from
font-family: Arial, Helvetica, san-serif;
to
font-family: Arial;
b.c. I assume that all modern browsers support Arial.
Is this O.K. ?
My understanding is that Helvetica & san-serif are only fallback fonts if Arial does not exist.
Font support is related to the user system, not browser. Arial is a pretty-standard font, available in all major Operational Systems.
Also, "sans-serif" is not a fallback font as you stated, but the typographic style of the font you intended to use.
Looking at your code:
font-family: Arial, Helvetica, san-serif;
It means: try use Arial first. If not available, Helvetica. If none of them is possible, then use any the default sans-serif font designated by the system.
For your specific case for extra security try using "Arial, sans serif" because in a worst-case scenario the browser will not mess your layout with a Serif font, which is the default font-family style applied.
Related
Can I write my font-family rule to include multiple fonts where not all fonts are sans-serif or serif or cursive?
I want to use a cursive font, but need a fallback that is `sans-serif'.
How can I go about this?
The two fonts, written in separate font-family rules would apear like this:
font-family: 'Overlock', cursive;
and
font-family: Arial, sans-serif;
Is there a way to use both, where Arial is the fallback?
What is the difference between serif and sans-serif in the CSS font-family property?
They are styles of font. Serif includes small lines, Sans Serif (sans means without) doesn't include them.
They are "system fonts", the browser will have a default font to use for each type in the system. You don't have control over them but they are good fallbacks if the font you want isn't on the users system. You can specify a comma list of fonts to try and use in CSS
font-family: "Times new roman", serif;
or
font-family: "Helvetica", sans-serif;
https://en.wikipedia.org/wiki/Serif
Serif fonts have a slight slight projection finishing off a stroke of a letter in certain typefaces whereas sans-serif fonts do not.
The CSS property of font-family can have either serif or sans-serif set as the property value. Based on which you have chosen, it will load the native font of the browser the visitor is currently using.
http://www.w3schools.com/css/css_font.asp
I can't see what is the point of doing this? For me it renders identically the same, so why should I use Arial, Helvetica, sans-serif vs just sans-serif?
The default font the user is seeing depends on the browser and its configuration. If you don't care what font the user is seeing—except that it is a sans-serif font, regardless of their system default—then by all means just use font-family: sans-serif;.
However, you can't depend on the defaults being specific fonts (e.g., Helvetica, Arial), as users can change them in their preferences. For a more uniform experience and design, it is a better practice to explicitly specify your font preferences, in order of priority.
In this case, it will default to using Arial, then fall back to Helvetica if Arial isn't installed, and then, finally, fall back to the system sans-serif default if Helvetica can't be found.
You should use "Arial, Helvetica, sans-serif " because if 'Arial' isn't available the font will be changed to 'Helvetica' which is the same as 'Arial' and so on.
How do I make it so Windows will always show Helvetica instead of Arial? Is this even possible? I know it automatically substitutes it, but is there any way to do this.
I know that I could use font squirrel but apparently that is illegal. Is there another solution?
You cannot. Even embedding a font would not force anything, since settings in the user’s system may prevent the use of downloadable fonts. Besides, embedding Helvetica is illegal, unless permitted by its copyright holder.
If you declare font-family: Helvetica, then Helvetica will be used only if the user’s system has Helvetica installed, and Windows systems usually don’t. Due to Windows settings, when Helvetica is not installed, Arial will be used instead.
Use this snippet to make sure your website is using Helvetica instead of Arial (if possible):
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
In addition there are many alternatives to Helvetica, if you need something free try Google WebFonts , they have at least a few fonts that look more or less like Helvetica: Actor, Asap, Cabin, Droid Sans, Lato, Open Sans, PT Sans, Varela.
As has already been said. If you are using an actual font and not an image of a font, you can not force a font onto a system legally.
What you should do is use a proper CSS font-stack as shown in other answers and the computer will use the first font that it comes to that it has on the system.
Always put Helvetica before Arial, so that when available it will be chosen first. Helvetica and Arial DO look very similar, but people who care can tell the difference.
http://www.ironicsans.com/helvarialquiz/
link is :
http://www.woolovers.com/silk-cotton/womens/sleeveless-silk-cotton-camisole.aspx
Left is iPhone display and right is PC. The fonts circled are having same css but have different display. A(pc)=B(pc) but A!=B. Any ideas?
As Jukka has said it is not a supported font on iOS so you have three options.
Choose a different font which is available on ALL (iOS, Android, MacOS, Windows etc.) platforms.
Host the font file on your web server and point to it with CSS #font-face.
Use an online font hosting service such as Google Webfonts
To point to a custom font with CSS use the code below and copy the Lucida Sans font file to your web server.
#font-face{
font-family: "Lucida Sans"; src:url('LucidaSans.ttf');
}
Note: Google Web Fonts does not have Lucida Sans available.
It seems that iPhone just hasn’t got a font named Lucida Sans and therefore uses another font. Cf. to What fonts do iPhone applications support?
My computer doesn't show the text using Lucisa Sans either, because the version of the font that I have is named Lucida Sans Unicode. All computers doesn't have a font named Helvetica either.
You should use a font stack will fallbacks all the way to the default font sans-serif defined in CSS. That way you know that one of the fonts specified will always be used, and it won't fall back to something completely different:
font-family: Lucida Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family:
You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.
I went with the following fallback fonts:
font-family: "Lucida Sans","Helvetica Neue",Helvetica,Arial,sans-serif;