2 Replies Latest reply on Mar 2, 2017 11:27 AM by gfrederickk

    Page load performance: Web fonts vs device native

    gfrederickk Level 1

      Good morning. We've had some robust conversations in our office regarding possible drags on system time caused by web fonts on our mobile websites.

      Some on our products team are lobbying heavily for strict use of "system fonts" on mobile devices. By system fonts, they're referring to San Francisco (iOS) and Roboto (Android).

      Perhaps best way for me to ask my question is to state my assumptions about how this works and ask you kind people to savage me where I am incorrect. OK?

      Here's what I think is true:
      -- San Fran and Roboto are natively installed on iOS and Android their respective devices.
      -- Although San Fran and Roboto are system fonts, they are not browser default fonts. Browser defaults are Arial, Helvetica, etc.
      -- If I use San Fran or Roboto in my mobile web design, I call it in my CSS, as I would with any web font. The difference is that the native font is preloaded, so I don't have the millisecond lag while I load a web font, such as Proxima Nova, from Typekit.
      -- If I load a web font, a user experiences a slight lag (milliseconds) on first load. After that, the font is cached, so there should be little or no difference in load time between the native font and web font during subsequent visits.
      -- Because native fonts are not browser defaults, there is still a FOUT possibility with SanFrancisco and Roboto, albeit a lesser chance perhaps.

      Am I close? Any help appreciated. Thank you.

        • 1. Re: Page load performance: Web fonts vs device native
          Liz, Typekit Support Adobe Employee

          Hi there,

           

          Bram, one of our Typekit engineers, took a look at your questions and had the following comments:

           

          -- San Fran and Roboto are natively installed on iOS and Android their respective devices.

           

          That's true for Android devices. For iOS, it is also true, but only for the most recent iOS devices. Older versions do not have San Francisco installed.

           

          -- Although San Fran and Roboto are system fonts, they are not browser default fonts. Browser defaults are Arial, Helvetica, etc.

           

          It's true that default browser fonts (e.g. sans-serif, monospace, and serif) are not necessarily system fonts, but it does happen. On some operating systems, the default browser font is the same as the system font (on Android for example, which does not have Arial and Helvetica). Other operating systems (and browsers) will have different defaults.

           

          -- If I use San Fran or Roboto in my mobile web design, I call it in my CSS, as I would with any web font. The difference is that the native font is preloaded, so I don't have the millisecond lag while I load a web font, such as Proxima Nova, from Typekit.

           

          Correct. System fonts are always faster than web fonts.

           

          -- If I load a web font, a user experiences a slight lag (milliseconds) on first load. After that, the font is cached, so there should be little or no difference in load time between the native font and web font during subsequent visits.

           

          Correct, once the web font is cached there is little difference between a web font and a system font.

           

          -- Because native fonts are not browser defaults, there is still a FOUT possibility with SanFrancisco and Roboto, albeit a lesser chance perhaps.

           

          That's not correct. FOUT and FOIT happen when web fonts are downloading. System fonts don't need to be downloaded and are available (almost) immediately, so you'll not see a FOIT or FOUT.

           

          I hope that this helps; let us know if you have any other questions. Best,

          -- liz

          • 2. Re: Page load performance: Web fonts vs device native
            gfrederickk Level 1

            Thank you Liz. I really appreciate the thoughtful response.