On Which Operating Systems or Browsers Are CSS Font-Family Names Case-Sensitive

On which operating systems or browsers are CSS font-family names case-sensitive

My guess is that this would only be a potential problem on Linux/Unix systems, where the file system is case sensitive. I'd be surprised if any Windows browser had a problem with this, since fonts are just files in the C:\Windows\Fonts directory.

You could try making a page with test text in a recognizable font like Courier New, but spell it funny like "CoUrIEr nEW", then go to http://browsershots.org/ where it will generate screenshots from tons of browsers. Be sure to make the font very large too, because the screenshots are small.

Something like this:

<html>
<head>
<style type="text/css">
#proper   { font: bold 48px "Courier New",Courier; }
#improper { font: bold 48px "CoUrIEr nEW",CoUrIEr; }
</style>
</head>
<body>
<p id="proper">Test1 - proper caps</p>
<p id="improper">Test2 - improper caps</p>
</body>
</html>

If only one line shows up in Courier, then that browser is case sensitive.

Edit: I tested the HTML I posted above in browsershots. I didn't find any browser that didn't work. Dillo 2.1.1 for Ubuntu Linux didn't like either line (maybe that system lacked both Courier New and Courier?), all others showed both lines in Courier or Courier New. There are still mobile browsers that were not tested, though, so you should strive to use proper capitalization just in case.

Are property values in CSS case-sensitive?

(updating @ÁlvaroG.Vicario answer and comments, and complementing this answer... This is a Wiki, please edit to enhance)

Example: for CSS3 (and HTML5) there are new explicit rules, as "font-face property must be case-insensitive".[2]

Context

W3C interoperating standards, mainly XML, HTML, CSV and CSS.

CSS general rules

CSS2 (a W3C standard of 2008) fixed basic conventions about "Characters and case", and CSS3 (a W3C standard for 2015) added something more.

By default "all CSS syntax is case-insensitive (...)" [1]
There are exceptions, "(...) except for parts that are not under the control of CSS"[1]

2.1. element names are case-sensitive in HTML5 (?) and XML, but case-insensitive in HTML4.

2.2. identifiers (including element names, classes, and IDs in selectors) are case-sensitive. HTML attributes id and class, of font names, and of URIs lies outside the scope of the CSS specification.

....
The

Case matrix

Exceptions and specific (explicited in a reference) rules. "YES" indicate that value is case-sensitive.

Property values:


 CSS property      | Case-sens. | Reference and notes
 ------------------|------------|--------------------
 %colorVals        | NO         | [3]
 font-family       | NO         | [2]
 %url              | YES        | ...
 content           | YES        | ...
 ----------------------------------------------------
 %colorVals = color, background, etc.
 %url = background-image, etc. that use `url()`, see [7] and notes.

Selector values:


 CSS selector      | Case-sens. | Reference and notes
 ------------------|------------|--------------------
 id                | YES        |...
 element           | YES/NO     | ... YES for XML...
 class name        | YES        | [5]
 (`~ i` operator)  | NO         | [6]
 ----------------------------------------------------
 YES/NO = depends on the document language (see ref. and notes).

REFERENCES:

[1] W3C/CSS2/syndata, sec. 4.1.3 Characters and case.

[2] W3C/CSS3-fonts, sec. 5.1 Case sensitivity of font family names

[3] W3C/CSS3-color, sec. 4.1. Basic color keywords

[4] W3C/CSS3-values, sec. 3.1. Pre-defined Keywords

[5] W3C/Selectors, sec. 3. Case sensitivity

[6] W3C/Selectors4, sec. 6.3. Case-sensitivity

[7] RFC 3986 and URL syntax illustration at Wikipedia.

Quotations and notes

Typical URLs starts with domain, that is case insensitive, but after it (path, query or fragment syntatical components), is case sensitive. See [7].
"User agents must match these names case insensitively". [2]

What is the value of local() in a CSS @font-face rule matched against?

As per the @font-face specification for src:

For OpenType and TrueType fonts, this string is used to match only the Postscript name or the full font name in the name table of locally available fonts. Which type of name is used varies by platform and font, so authors should include both of these names to assure proper matching across platforms.

So the answer is, quite literally, "it depends on what's parsing the @font-face rule". Thankfully, this is CSS, so we can indicate multiple sources, which includes multiple local sources:

@font-face {
  font-family: "My Gentium",
  src: local(Gentium Bold),    /* full font name */
       local(Gentium-Bold),    /* Postscript name */
       url(GentiumBold.woff);  /* otherwise, download it */
  font-weight: bold;
}

Capitalization of font names in CSS / HTML required?

serif and sans-serif are not font names, they are 'general style defaults' that will load a system (your local) default that matches said type. Serifs are the little curly bar things on the end of characters. sans is French for without.

Low overhead methodology to determine case sensitivity of OS

With the restriction of not being able to write to the file system i.e.

write A.txt to a known location then try to read a.txt

I do not believe there is a way. Because even with OS sniffing (hacky at best and likely to give incorrect results) that is only referring to the OS... different filesystems on the os can behave differently (ie linux is case sensitive but the cifs share I have mounted is not)

I would say if knowlege of the case sensitivity of an os's filesystem it should be declared in code or config.

Or better build assuming case sensitivity but don't do anything that would break in a case insensitive environment, because anything that works on a case sensitive system will work on a case insensitive system (assuming you don't rely on the behavior of A.php and a.php being two different things which case sensitive or not is just dumb.)

What are legal characters in Font names?

Almost all the formats you list are versions of OpenType:

modern TrueType refers to an OpenType font with TrueType glyph outlines
WOFF simply wrap "SFNT" structured fonts, which these days is basically just OpenType fonts, allowing for optional per-table compression.
modern PostScript refers to an OpenType font with a CFF block, which describes outlines using an embedded font format with Type2 charstrings (which aren't actually PostScript. Only "Type 1" fonts were PostScript fonts, but when OpenType took off Adobe retired Type 1 entirely, moving their entire font catalogue over to OpenType with CFF blocks instead)
SVG in the context of fonts can refer to two different things: "svg fonts", which is a dead technology, and a new variant of OpenType fonts with SVG outlines.

So it's really a question of "which naming format does OpenType allow", and "within that, which format is widest supported". Thankfully, the OpenType naming table specification has most of that information.

The important part is that you're not defining "one" family name, you define it several times, for different audiences. Have a look at the "Name IDs" section for the name table, and you'll see several fields all intended to house the font name, just for different contexts:

Font family name, free string form. This is used in "normal applications" to tell you what font you're looking at.
Font subfamily name, e.g. "italic", "oblique", etc.
A unique identifier for this font. Sensible ids involve some combination of ids 1 and 2 plus some "when this file was released" information, but you can also go free form.
The "full font name". Typically, just name ids 1 and 2, separated by a space, but you can deviate from this if you want.
The font version string, with rules on what it should look like
The postscript name. This one is special, and you should read up on what it's used for. The name in no way has to match the real font name. It's good form to make sure it does, though.

As a real world example, let's look at the name strings for Palatino Linotype:

"Palatino Linotype"
"Regular"
"Palatino Linotype Regular April 1998"
"Palatino Linotype"
"Version 5.00"
"PalatinoLinotype-Roman"

In terms of platform differences, not every platform needs all these strings for the font to be installable, or usable. Hit up this SO question for more information on that. For webfonts, for instance, Name ID 1 is technically sufficient since the "role" the font plays is wholy determined by the @font-face rule we give it, but for desktop applications IDs 2 through 5 matter a lot. And of course for postscript devices, ID 6 is critical, so Operating Systems tend to not recognise a font as "proper" without it.

Helvetica renders as Arial on Windows OS

Windows substitutes Arial for Helvetica. (Specifically Helvetica; not Helvetica Neue.) A simple way to see this is to declare font-family: Helvetica, Courier. Browsers on Windows platforms then use Arial, not Courier (as they should).

This can be changed by editing Windows registry, but as a web author, you can’t do anything about it (apart from attempts at OS-sniffing via browser-sniffing). It is an old issue (dating back at least to Windows 3, I think), though not very widely known.

How to render thin fonts more smoothly in CSS 3 on Windows?

You are never going to get sites to look the same in different browsers or operating systems, they are using different technologies etc etc.

This is something you shouldn't really care about. People who use IE are not going to switch to Firefox or Chrome or vice versa. They are used to the way fonts look and are not going to notice.

Browsers inconsistencies is a thing front end developers have to live with (sadly). Its great if they all look the same but that's not going to happen

Things you can try, you will probably need different fixes for different browsers.:

text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;

Edit 1: DirectWrite is now on chrome for windows which will improve the rendering.

Edit 2 (2017): System UI fonts

Another thing you can try is use system fonts for improved UX.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Readup - smashingmagazine

Readup - booking.com

Readup - medium

On Which Operating Systems or Browsers Are CSS Font-Family Names Case-Sensitive