As far as I know, one needs to use double or single quotes for fonts if they contain spaces, like:
font-family: "Times New Roman", Times;
font-family: 'Times New Roman', Times;
But on Google Fonts (http://www.google.com/webfont), I also see
font-family: 'Margarine', cursive;
Some even use it like so:
font-family: 'Margarine', 'Helvetica', arial;
I find this weird, as the following works as well:
font-family: Arial, Helvetica, sans-serif;
font-family: Cambria, serif;
So what is the correct usage of quotes around font names in CSS?
You can always put a specific font family name in quotes, double or single, so Arial, "Arial", and 'Arial' are equivalent. Only the CSS-defined generic font family names like sans-serif must be written without quotes.
Contrary to popular belief, a font name consisting of space-separated names such as Times New Roman need not be quoted. However, the spec recommends “to quote font family names that contain white space, digits, or punctuation characters other than hyphens”
When to quote font-family:
Optional
font-family: Times New Roman; /* These are equivalent */
font-family: 'Times New Roman';
font-family: "Times New Roman";
font-family: Unique Ode™ 😊 Épopée; /* These are equivalent */
font-family: "Unique Ode™ 😊 Épopée";
font-family: "Answer #42" /* These are equivalent */
font-family: "Answer \23 42";
font-family: Answer \23 42;
As long as a font name contains only:
a-z letters (case ignored)
0-9 digits
- dash
_ underscore
non-ASCII Unicode
single inner spaces
backslash hexadecimal character codes
then quotes are optional. Single or double quotes. Case ignored. There are some weird edge cases: unquoted words must not start with a digit, dash-dash, or dash-digit.
Must
font-family: "Intro Rust 2" /* Unquoted words must not start with numbers. */
font-family: "Serif"; /* For your own Serif, not the generic serif. */
font-family: "Yin/Yang"; /* Quote or code most ASCII punctuation. */
Should
font-family: "Initial Seals JNL" /* `initial` and `default` are reserved words. */
font-family: "Omar Serif" /* Generic names might also be reserved words? */
Must Not
font-family: monospace; /* Generic fonts must NOT be quoted. */
font-family: serif;
font-family: sans-serif;
font-family: cursive;
font-family: fantasy;
Thanks:
Article on font names by Mathias Bynens, linked by Stephan B's comment.
bizworld's point about conflict with generic fonts.
Mozilla's description of Custom Identifiers.
W3C spec for font-family and identifiers, linked by Jukka K. Korpela's answer
I've just learned myself that the quotes aren't ever necessary but rather recommended. We all learn something new every day.
The other place you see them is in css properties that require a url
background:url('hithere.jpg');
background:url(hithere.jpg);
Both those statements are going to work exactly the same. Same goes for the fonts, which type of quote you use is irrelevant in this case, just be consistent in how YOU do things and that is all that really matters.
For two reasons;
When an actual font-family name shares the same name as a generic family name, to avoid confusion with keywords with the same names e.g.
p {font-family: 'Shift', sans-serif;}
When there are more than one word in a font-family name e.g.
p {font-family: 'Times New Roman', ..... , a generic family name here ;}
You have to use quotes when there is a space in the font name. If there is no space in the font name, it's best practice to leave them off, although it won't hurt anything but your file size to have them still.
Examples:
font-family: "Times New Roman", Times; // ok, and best practice
font-family: Times New Roman, Times; // incorrect, Browser won't be able to find Times New Roman
font-family: "Times New Roman", "Times"; // ok, but has extraneous quotes around Times
Related
I found people wrote CSS like
h1 {font-family: "Helvetica Neue"}
h1 {font-family: 'Helvetica Neue'}
h1 {font-family: 'Roboto'}
h1 {font-family: Roboto}
I saw most of the people use ' more and 'Roboto' more than Roboto.
Is there even any tiny difference?
BTW, I asked this question because I saw this on Google Fonts:
If there's no difference, why does Google bother adding a ' in it?
You can always put a specific font family name in quotes, double or single, so Roboto, "Roboto", and 'Roboto' are equivalent. Only the CSS-defined generic font family names like sans-serif must be written without quotes.
Contrary to popular belief, a font name consisting of space-separated names such as Helvetica Neue need not be quoted. However, the spec recommends “to quote font family names that contain white space, digits, or punctuation characters other than hyphens”
I am a beginner coder and i have a small problem.I set the font types of my paragraph and heading in my HTML document to Arial using CSS. the code is as follows
h4{
font-family
arial san-serif;
}
The problem is that when I run the code the font doesn't change.
firstly I would like to know why this is. Could it possibly mean that I don't have the font on my computer. If so how do I correct this. Any help would be much appreciated.
P.S. It might be worth it to know that I am running notepad ++
font-family:
you forgot ":"
h4{
font-family: arial, san-serif;
}
You need to add a colon : and a comma ,.
h4{
font-family: arial, san-serif;
}
Also keep in mind that if you are using fonts with spaces, quote them.
h4 {
font-family: "Times New Roman", Georgia, Serif;
}
W3 Schools has a good explanation if you want to read more about it.
Is it possible to add a fallback font directly to the definition of the font-face?
Example:
#font-face {
font-family: 'MyWebFont', Arial, Helvetica, sans-serif;
src: url('fonts/MyWebFont.eot');
src: url('fonts/MyWebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/MyWebFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
And then using it as font-family value with automatic fallback, like so:
p {
font-family: MyWebFont;
}
My goal is not to having to define the fallback fonts everywhere I define a new font-family. If not like above, can I somehow achieve this without JavaScript? Thanks for your help!
No, you cannot specify any fallback fonts inside a #font-face rule, because such a rule defines a font face and assigns a name to it. Inside the rule, the font-family part can contain only one name, the name you choose to assign. It would be pointless list several names there, since only the first one can possibly matter (and, besides, in this context no name has any predefined meaning, e.g. Arial would not mean the Arial font but be just an arbitrary assigned name).
Fallback fonts can be specified only in normal font-family rules.
Consider organizing your style sheet so that the relevant font-family list appears only once, using a suitable list of selectors, like
p, blockquote, .foobar, .something {
font-family: MyWebFont, Arial, Helvetica, sans-serif;
}
You can totally add fallback fonts to a #font-face rule!* You don't add them to the font-family descriptor (that's for giving your font family a name); you add them to the src descriptor, which accepts multiple values. If the browser can't find (or doesn't support) the first font, it will try loading the next one, and so on. You can have it look for fonts installed on the user's system using the local() function:
#font-face {
font-family: bodytext;
src: url(fonts/MyWebFont.woff) format("woff"),
local(Arial),
local(Helvetica);
}
Some people may argue that url() and local() weren't designed to be used this way. Typically, they're used to provide local and remote versions of the same font, with the web-font functioning as a fallback if the local font can't be found. Here's such an example from the W3C specs:
#font-face {
font-family: MyGentium;
src: local(Gentium), /* use locally available Gentium */
url(Gentium.woff); /* otherwise, download it */
}
But there's nothing to say you can't use it in place of a regular font stack. Check out this W3C example:
Create an alias for local Japanese fonts on different platforms:
#font-face {
font-family: jpgothic;
src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
}
*There are some caveats though. Don't expect this to work exactly like the familiar font-family stack that you're used to. Firstly, there's no fallback for individual characters that may not be supported by your font. Secondly, you can't refer to generic font-families (like sans-serif, system-ui, etc). For those features, you're stuck with the classic font stack. But you can happily use both features, encapsulating all your named fonts in the #font-face rule, and adding the generic font as your last-resort fallback in the font-family declaration:
p {
font-family: bodytext, sans-serif;
}
CSS Variables is one solution to stay DRY
:root {
--MainFont: "Gotham", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
--HeavyFont: "Gotham Black", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
body {
font-family: $MainFont;
}
h1 {
font-family: $HeavyFont;
}
This question already has answers here:
Do I need to wrap quotes around font family names in CSS?
(3 answers)
Closed 9 years ago.
When should the value for CSS 'font-family' have quotes around it?
I've seen both font-family: arial and font-family: "arial".
As a specific example, I declare a font this way:
#font-face {
font-family: 'entypo';
font-style: normal;
font-weight: 400;
src: url('/css/fonts/entypo.woff') format('woff');
}
What would be the correct CSS to have an element use this font-family?
You only need quotes when the font itself has a space such as "Times New Roman".
Arial does not need quotes, but some people use quotes such as "Arial" to be more consistent. It is simply personal preference.
Seen in Justin's below comment: font-family: times new roman; works without quotes (JSFiddle).
You can call your new #font-face using font-family: 'entypo'; as you would normally expect. (link)
Just going to answer from this:
http://www.w3.org/TR/CSS2/fonts.html#font-family-prop
To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:
body { font-family: "New Century Schoolbook", serif }
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.
By the CSS 2.1 spec, a font name needs to be in quotes if it contains characters other than identifier characters (which is a broader concept than just “Ascii letters and digits”) and spaces. So font-family: foo bar is correct, and so is e.g. font-family: entypo of course.
Coding style is a different issue. It is always correct to quote a specific font family name (as opposite to generic names like sans-serif), so font-family: "entypo" is correct, too.
Very theoretically, a font name also needs to be quoted if a specific font family name coincides with a generic name (I don’t think anyone ever created such a font) or if its name contains leading or trailing spaces or consecutive spaces (but no one in his sense would name his font that way).
I want to use Helvetica in a font-family list like
font-family: 'Helvetica', Arial, sans-serif;
Thing is that sometimes I notice that people put Helvetica in quotes and sometimes they don't.
Can anyone shed light on why ?
It really is just a matter of preference, as there are no spaces like in "Times New Roman" the quotes are completely optional, Just a matter of what they are used to...
Quotes are necessary only when font name contains whitespaces. Even W3C don't quote Helvetica.
Quotes enable multi word font names, like 'Sans Serif' or 'Times New Roman'.
Since Helvetica is a single word, quotes are not necessary.