As a developer, there are often cases where we need to use the
system font on web pages. Many times these pages are embedded in
our apps and manage things like remote settings or documentation.
In these contexts, matching the content to what the customer sees
in their surrounding environment makes a big impact on the user
experience. Think about how out of place an app feels when it
displays Sparkle release notes in Lucida Grande while running on
We’ll soon be faced with a lot of surrounding content that’s
displayed in San Francisco and will need ways to specify that same
font in our CSS. It turns out that’s not a simple thing to do.
Hopefully this will get easier, but his workaround seems pretty solid for now.