As I delve deeper into our next responsive website, I am exploring the options of using system fonts for phone versions. And am wondering a few things.
First would be, if we specify a font that is on the device (such as a system font), but we also have an call for Open Sans (our default body typeface), would the device still download the Open Sans typeface file? Open Sans would be listed after the system fonts in the font-family declaration.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<style type="text/css">
body { font-family: roboto, segoe, helvetica, 'open sans', sans-serif; }
</style>
Or as a @font-face call.
<style type="text/css">
@font-face {font-family:OpenSans; src: url('https://fonts.gstatic.com/s/opensans.woff'); }
body { font-family: roboto, segoe, helvetica, 'open sans', sans-serif; }
</style>
If this type of set up does eliminate downloading the font and thus decreasing the data usage to view the webpage, I am wondering if someone knows the technical aspects of the system fonts. In particular what names would be used in the css font-family declaration? Newer Androids are easy as the name is simply 'roboto', but how do we declare Segoe on Windows phone or Helvetica Neue / Lucinda on iPhones and iPads. And how does one determine which font weights are present and their values (we use 400 & 600 on Open Sans because we don't want a real heavy bold font).
Updating the question with our solution ....
This really had an oh duh answer, we just set the body css to use system fonts initially (mobile first css), then when we reach the breakpoint for laptops and desktops, use the @font-face call for Open Sans and update the body css to use it.
I found the following font-family setting giving me default system fonts on all mobile devices:
font-family: system,-apple-system,".SFNSText-Regular","San Francisco",Roboto,"Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;
This css snippet (borrowed from issue on github) defaults to system font, on most platforms (OSX, iOS, Windows, Windows Phone, Android, Ubuntu):
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
-apple-system — San Francisco in Safari (on Mac OS X and iOS); Neue Helvetica and Lucida Grande on older versions of Mac OS X.system-ui — default UI font on a given platform.BlinkMacSystemFont — equivalent of -apple-system, for Chrome on Mac OS X."Segoe UI" — Windows (Vista+) and Windows Phone.Roboto — Android (Ice Cream Sandwich (4.0)+) and Chrome OS.Ubuntu — all versions of Ubuntu.
Fonts for other OS or older versions of them could be found in this article on css-tricks.
If you declare, say, body { font-family: roboto, segoe, helvetica, 'open sans', sans serif; } and the user’s device has a font called roboto installed and it contains glyphs for all characters in the content, then the rest of the font family list should be ignored. This means if some of those fonts is declared as a downloadable font with @font-face (directly or indirectly by using code provided by Google), then no download should take place. But if there is any character not present in that font, then the list should be processed further and this should result in a font download if no preceding font in the list contains the character.
In practice, browsers may implement this differently, e.g. they might always load the downloadable font, or they might fail to download it if any preceding font in the list exists in the system, even if it does not cover all the characters. You would need to organize suitable tests for each browser to see exactly how they behave. In general, if you declare a downloadable font, you should expect it to be downloaded, and you should put it first in font-family list to ensure that.
Regarding the specific font names, declaring segoe is useless. There is no such font; Segoe UI exists in many Windows systems. The name helvetica means in principle a font that is mostly available on Apple devices only, but in practice Windows, oddly enough, takes it as meaning Arial, unless the system has actually Helvetica installed. Declaring sans serif is useless; there is no such font; you probably meant sans-serif, which is the valid name for a system-dependent sans serif font.
