

Using the System Font in Web Content - ingve
https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

======
sbarre
This feels like a full-circle back to Internet Explorer (v4 or v5?) in the
_late 90 's_ where you could specify CSS rules in your HTML to match your
styling to the colours (panes, borders, scroll bars, headers, text, all of it)
and fonts that users set in their Windows machine's control panel for the
operating system window chrome.

We used those style rules extensively for our Intranet web apps (mod_perl
y'all) to make them look more "native". And it worked, it was a big part of
our wow factor when showing our stuff off.

I'm glad we're _finally_ catching up to Microsoft on this. ;-)

~~~
mixmastamyk
System colors have been around forever, I don't remember them being IE
specific. If they were it wasn't for long.

[http://webdesign.about.com/od/colorcharts/l/blsystemcolors.h...](http://webdesign.about.com/od/colorcharts/l/blsystemcolors.htm)

I always appreciate when they are used, so pages fit my OS theme.

~~~
sbarre
Ah well, my bad, I thought this was an IE-only thing but you appear to be
correct, it looks like it was part of the CSS 2.1 spec.

Check out an example here:
[http://www.iangraham.org/books/xhtml1/appd/update-23feb2000....](http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html)

At the time, it was Internet Explorer vs. Netscape, and we were building
Intranet web apps for Windows users, so our target browser was pretty much
only Internet Explorer. Mostly because of the more advanced JScript and XML
processing capabilities, and eventually HTAs and early XMLHttpRequest support
that came with IE6.

Surprisingly we never got into ActiveX components. Even back then, they seemed
like a bad idea... :)

~~~
mixmastamyk
Yep, that's the page I remember.

------
127001brewer
Here's more information about this: [http://furbo.org/2015/07/09/i-left-my-
system-fonts-in-san-fr...](http://furbo.org/2015/07/09/i-left-my-system-fonts-
in-san-francisco/)

~~~
jrochkind1
Thanks, that clarifies that indeed this only works in Safari.

------
elcapitan
Why doesn't Webkit on the Mac just set the respective system font as value for
"sans-serif"?

~~~
derefr
The "default UA stylesheet" has always been a weird compromise: slightly
different in every browser, yet generally all trying to render pages from 1994
mostly the same way they looked in 1994.

Personally, I think it would make way more sense if you could specify
something like a "base style" meta-tag, with values like:

• "browser" (the default): do what we're doing now, where every browser styles
things a bit differently, and a default Chrome <button> looks nothing like a
default Safari <button>, and so forth.

• "legacy": make the page look _exactly_ like it would when displayed in NCSA
Mosaic in 1994. (This style could be inferred from the headers and auto-
applied if the server sends a very old modification date or the page uses an
older version of HTML.)

• "reset": a WHATWG-standardized set of CSS reset values

• "native": make tags resemble native OS controls—<p> should look like label-
control text, <h1> should look like a native header style, <button> like an OS
button (instead of a browser button), etc.

The interesting part of this is that this would allow the "browser" style to
diverge _further_ from the "legacy" and "native" styles than it already has,
since any web designer could just ask the browser to drop all its
customizations in a quick-and-convenient way.

------
pmontra
It's hard to test a page that uses a font you don't have access to and you
can't virtualize OS X on other OSes. Web pages shouldn't be pixel perfect
(there is PDF for that) still sometimes you have to fit text into fixed width
areas and you want to see what happens.

~~~
glitch
In the context of general "-system-✻" font & style identifiers (not merely
-apple-system-✻ specific)...

1\. Knowing extremes and layout boundary conditions: You can reasonably test
extremes of wide and condensed font metrics; it's not that hard.

2\. Rigid designs: If you don't want to use the ambiguous system font, you
don't have to; it doesn't change that. If you have a design that requires
certain rigidity and inflexibility, you can have your explicitly imported web
fonts and be happy.

3\. Flexible designs: Be flexible and fluid. Be like water. Heck, there are
slight unknowns with using any non-explicitly defined font. Using CSS generic-
family identifiers (serif, sans-serif, cursive, fantasy, and monospace) have
variation and are not guarantees, but you can still use them without much
concern for layouts that are designed to be appropriately accommodating.

4\. Native look and feel: If you want to achieve something closer to the
native system look and feel, being able to use the system font from CSS helps
you out immensely. For those that (1) design their layout to flow relatively
nicely without being overly fixed or constrained and (2) want to have an
appearance matching the system font, then it's great!

5\. Testing: From my experience, this doesn't pose any significant testing
issues. Besides testing artificial extremes of wide and condensed font
metrics, practical testing across multiple environments isn't anything new.
It's something that already gets done by any skilled front-end designer. Many
shops will test across many browsers under may platforms anyway. Sites like
[http://browsershots.org](http://browsershots.org),
[https://www.browserstack.com/screenshots](https://www.browserstack.com/screenshots),
[http://www.crossbrowsertool.com](http://www.crossbrowsertool.com),
[http://www.browsershots.atm](http://www.browsershots.atm),
[https://www.browserling.com](https://www.browserling.com),
[http://dev.modern.ie/tools/screenshots/](http://dev.modern.ie/tools/screenshots/)
and many others are out there for people who don't have or don't want to deal
with the setup in-house to do testing. (You might have to supplement it with
mobile devices in-house, sure.) You can easily cover 95% of the actually used
environments (browsers/platforms) very explicitly, and for the environments
you don't explicitly test for, at that point of successful testing, it's very
likely there won't be an issue, and if there is an issue, it should be minor
and not significantly matter. Be pragmatic.

------
applecore
Is there any legitimate way to use Apple's new system font, San Francisco, in
non-Apple systems? Do other platforms support a generic "system" font family?

~~~
dubcanada
Read the article, it clearly says...

On platforms which do not support “-apple-system,” the browser will simply
fall back to the next item in the font-family fallback list. This provides a
great way to make sure all your users get a great experience, regardless of
which platform they are using.

There are currently discussions in the w3c regarding standardizing this value
so authors could simply specify “system.” However, these discussions have not
reached consensus, so WebKit prefixes this value.

------
dsr_
Does anyone else think there might be a significant security value in not
allowing a web browser access to a font associated with messages from the
operating system?

~~~
geofft
Unless the font is particularly distinctive to the most casual reader, such an
approach seems like pseudosecurity. San Francisco is not distinctive enough
from other well-designed serif fonts that people will intuitively notice a
spoofed message.

Besides, malware authors generally cannot be expected to follow copyright law.
They can just steal the system font OTF and convert it to a web font, or
render text as an image (which may not even be illegal), or any number of
similar things.

~~~
andrewingram
Agreed on the first point. Your second doesn't make sense to me, since any
situation where using San Francisco is going to give an extra sense of
authority, is also a situation where it's already available to use.

~~~
geofft
Hmmm, I guess your argument is that Apple could prevent San Francisco from
being usable as a font in even a desktop word processor, so you can't make an
error message in that font and screenshot it?

It seems like this boils down to DRM on the font -- only making it accessible
to Apple-signed applications (not even to third-party apps, since I can write
a third-party app that pops up a custom error message and then take a
screenshot of my app). This is untenable for the usual reasons that DRM is
untenable.

------
greggman
So much for no more prefixes :(

[http://www.w3.org/blog/CSS/2012/08/30/resolutions-53/](http://www.w3.org/blog/CSS/2012/08/30/resolutions-53/)

~~~
gsnedders
It was meant to be a non-web feature, till people found out about it and
started posting blogs posts elsewhere, AFAIK, hence the decision to prefix
does follow that resolution.

------
andy_ppp
Make websites that look like websites.

Do not try to match them to desktops, unless you are wrapping the website in a
desktop launcher!

I personally find the character of the San Francisco Font to be very Apple
these days, clear to the point of being patronising and devoid of a soul.

