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
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?
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.
My website uses a web font called "Days One".
font-family: "Days One", Calibri, sans;
When Days One is not available, the webpage defaults to Calibri, if it's available.
The problem is that Days One is a lot thicker than Calibri, so when it defaults to Calibri, the font on the page looks a lot thinner. I want to set the font-weight to bold whenever the page is using Calibri, but not bold when it's using Days One.
You cannot. The font family and the font weight are independent in terms of CSS.
Days One is apparently bold, but not declared that way, and it does not have any regular typeface. They’re cheating, more or less, so you can counter-cheat by declaring the font to be bold. But this requires that you download and install the font to be used on your server.
I am new to Google Fonts. I have gotten this URL from Google:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
My question is, how to use the various fonts I have selected. They are, as you can see, Ubuntu Normal 400, Ubuntu Normal 400 Italic, Ubuntu Bold 700, and Ubuntu 700 italic.
I have tried everything but can only use plain "Ubuntu" and nothing else.
Please help!
Here is me using italic version of this: http://jsfiddle.net/6wzuy/
font-family:ubuntu;
font-style:italic;
font-weight: 700;
The technique is to use CSS font-style Property
font-family: 'Ubuntu', Arial, serif; font-weight: 700;
EDIT: You have to include separate font libraries of italics and bolds in order for them to work as intended.
If you don't include the italic and bold versions, the browser will try to compensate, but will more than likely do a very poor job. More about this in this List Apart article.
If you want to add font styles to your fonts, always add the extra font styles to and specify it in your document. Especially in large serif font it can make a huge difference.
The Google code you use declares regular, italic, bold, and bold italic typeface (specific font) as members of the font (font family) “Ubuntu”. This implies that you use italic and bolding just as you do when using normal fonts.
You can use font-style: italic to request for italic typeface and font-weight: bold (or, equivalently, font-weight: 700) to request bolding. Note that many HTML elements imply italic or bold by default; for example, h1, strong, and th elements imply font-weight: bold.
There are other ways of using #font-face so that each typeface is declared as a font family of its own; FotSquirrel does that. But the approach applied by Google is more logical and compatible with the way fonts are generally used in HTML and in CSS.
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/