5 ms·

I'm really surprised all the typography options require downloadable fonts (Source Sans Pro and/or Merriweather). I'm on a 1mbit throttled connection right now

I'm really surprised all the typography options require downloadable fonts (Source Sans Pro and/or Merriweather). I'm on a 1mbit throttled connection right now, and it's really noticeable, even on these pages, the font loading takes a while and suddenly the whole page jumps around and re-renders. Though apart from that It's a great guideline. Really glad they put so many color choices in there and taking care of showing how to combine typography with color. Many guidelines I've seen have two accent colors and when you come to implementing the site, you straight away must deviate from the guideline and invent new things.

dangero 10y ago
It does suck especially if agencies rehost the fonts and you end up downloading the same ones over and over. Hashed font caching solves this problem pretty well and that seems like the answer instead of forcing everyone to use a common set of fonts.
- algesten 10y ago
  Maybe there could be room for innovation here? Signed font sets with known hashes (maybe piggyback on HTTP ETag?), so over time your browser has a cache of "well known fonts". Things like Source Sans Pro are not unusual.
  - mschuster91 10y ago
    Why not modify the CSS syntax? For example, what now is src: url("path/my.otf") format("opentype"); can become src: url("path/my.otf") format("opentype"); src: url-hash("path/my.otf", "md5:86fb269d190d2c85f6e0468ceca42a20") format("opentype"); This way, due to the double declaration, older browsers can opt to download the file as usual while a modern browser detects the hash and can look up the file from its cache. Note I chose md5 here as an example, it may very well be possible to use any hashing scheme here.
    - dchest 10y ago
      Obligatory: https://hillbrad.github.io/sri-addressable-caching/sri-addressable-caching.html https://hillbrad.github.io/sri-addressable-caching/sri-addre... (List of problems you need to solve to introduce hash-addressable caching to Web)
      - angry-hacker 10y ago
        What if major operating systems would include the popular fonts on Google library with update(s)?
        dchest 10y ago
        Then you can use them: src: local('Font Name'),
        mschuster91 10y ago
        Please not. People e.g. download questionable fonts from the net, which e.g. have been stripped of everything non-alphanumeric, and then complain to you "your website looks bad", or they have official, but fossilized versions of fonts... I always strip local-sources when embedding webfonts for this reason.
    - IncRnd 10y ago
      You're eventually going to run into trouble attempting to use md5 at a government website. FIPS 140-2 (and soon 140-3) is a standard that stops the use of that particular piece of crufty, broken cryptography.
  - matt4077 10y ago
    Fonts are the only type of vendor resources where this actually somewhat works – Google fonts has a rather large marketshare that allows it, and sites usually just dependent on the font, not a specific version of it. With js or css libraries, there are usually multiple CDNs and every website uses a different patch version anyway.
    - WorldMaker 10y ago
      Fonts are also the only resource that you have the option to install directly into your operating system's system cache, as well, and know that your browser will prefer local cached options. A tool like Skyfonts can be used to automatically install the top 50/100/etc fonts from Google Fonts directly into your system's fonts directory. The trade off is that there are system font thumbprinting disclosures that you potentially open yourself to tracking, if you are concerned about your privacy on the web. (I think a good idea would be for one or more of the operating systems and/or browser vendors to directly encourage installing the top so many Google Fonts, because the more people do it, the fewer privacy concerns.)
- wavefunction 10y ago
  I'd just put all the static libraries/resources on a common CDN for Federal government sites.
kozak 10y ago
Web fonts mean no platform-specific fonts. That's a very right thing to do for a government. Comes at a price of download size, but that's probably still worth it.
- mulmen 10y ago
  Why is it "very right" for the government to use a platform-independent font instead of a font that loads quickly and provides users with access to relevant information quickly?
  - DaiPlusPlus 10y ago
    Or just `font-family: sans-serif;` in CSS.
- mattnewton 10y ago
  I disagree entirely. Government sites should be snappy and accessible to all above all else. Unnecessary font downloads give people with poor internet connections a worse experience for questionable utility.
  - thaumasiotes 10y ago
    > Government sites should be snappy and accessible to all above all else Which is a bigger accessibility failure? - the page takes longer to download - You can't see any text on the page
    - Nadya 10y ago
      Both. - The font needs to download - The font might not download at all Browsers support these wonderful two defaults called `sans-serif` and `serif` that will use a default, system-installed, user-controllable font that doesn't need to be downloaded and will be guaranteed to work for any user! { font-family: sans-serif; serif; }
    - recursive 10y ago

dangero 10y ago

It does suck especially if agencies rehost the fonts and you end up downloading the same ones over and over. Hashed font caching solves this problem pretty well and that seems like the answer instead of forcing everyone to use a common set of fonts.

algesten 10y ago
Maybe there could be room for innovation here? Signed font sets with known hashes (maybe piggyback on HTTP ETag?), so over time your browser has a cache of "well known fonts". Things like Source Sans Pro are not unusual.
- mschuster91 10y ago
  Why not modify the CSS syntax? For example, what now is src: url("path/my.otf") format("opentype"); can become src: url("path/my.otf") format("opentype"); src: url-hash("path/my.otf", "md5:86fb269d190d2c85f6e0468ceca42a20") format("opentype"); This way, due to the double declaration, older browsers can opt to download the file as usual while a modern browser detects the hash and can look up the file from its cache. Note I chose md5 here as an example, it may very well be possible to use any hashing scheme here.
  - dchest 10y ago
    Obligatory: https://hillbrad.github.io/sri-addressable-caching/sri-addressable-caching.html https://hillbrad.github.io/sri-addressable-caching/sri-addre... (List of problems you need to solve to introduce hash-addressable caching to Web)
    - angry-hacker 10y ago
      What if major operating systems would include the popular fonts on Google library with update(s)?
      - dchest 10y ago
        Then you can use them: src: local('Font Name'),
        mschuster91 10y ago
        Please not. People e.g. download questionable fonts from the net, which e.g. have been stripped of everything non-alphanumeric, and then complain to you "your website looks bad", or they have official, but fossilized versions of fonts... I always strip local-sources when embedding webfonts for this reason.
  - IncRnd 10y ago
    You're eventually going to run into trouble attempting to use md5 at a government website. FIPS 140-2 (and soon 140-3) is a standard that stops the use of that particular piece of crufty, broken cryptography.
- matt4077 10y ago
  Fonts are the only type of vendor resources where this actually somewhat works – Google fonts has a rather large marketshare that allows it, and sites usually just dependent on the font, not a specific version of it. With js or css libraries, there are usually multiple CDNs and every website uses a different patch version anyway.
  - WorldMaker 10y ago
    Fonts are also the only resource that you have the option to install directly into your operating system's system cache, as well, and know that your browser will prefer local cached options. A tool like Skyfonts can be used to automatically install the top 50/100/etc fonts from Google Fonts directly into your system's fonts directory. The trade off is that there are system font thumbprinting disclosures that you potentially open yourself to tracking, if you are concerned about your privacy on the web. (I think a good idea would be for one or more of the operating systems and/or browser vendors to directly encourage installing the top so many Google Fonts, because the more people do it, the fewer privacy concerns.)
wavefunction 10y ago
I'd just put all the static libraries/resources on a common CDN for Federal government sites.

kozak 10y ago

Web fonts mean no platform-specific fonts. That's a very right thing to do for a government. Comes at a price of download size, but that's probably still worth it.

mulmen 10y ago
Why is it "very right" for the government to use a platform-independent font instead of a font that loads quickly and provides users with access to relevant information quickly?
- DaiPlusPlus 10y ago
  Or just `font-family: sans-serif;` in CSS.
mattnewton 10y ago
I disagree entirely. Government sites should be snappy and accessible to all above all else. Unnecessary font downloads give people with poor internet connections a worse experience for questionable utility.
- thaumasiotes 10y ago
  > Government sites should be snappy and accessible to all above all else Which is a bigger accessibility failure? - the page takes longer to download - You can't see any text on the page
  - Nadya 10y ago
    Both. - The font needs to download - The font might not download at all Browsers support these wonderful two defaults called `sans-serif` and `serif` that will use a default, system-installed, user-controllable font that doesn't need to be downloaded and will be guaranteed to work for any user! { font-family: sans-serif; serif; }
  - recursive 10y ago