Add in fonts from old AMP version of site

[JasonYao]

I miss my serif fonts

[JasonYao]

look into if style sheets can be defered like scripts can, and if so, set a default serif font and then pull in the specific generic serif font with

<link href="https://fonts.googleapis.com/css?family=Anonymous+Pro|IM+Fell+Great+Primer" rel="stylesheet">

from https://github.com/JasonYao/deprecated-old-2017-site/blob/source/_includes/head.html#L50

[JasonYao]

Some articles on optimizing this to not slow us down:

• https://www.smashingmagazine.com/2019/06/optimizing-google-fonts-performance/

  • Use both DNS Prefetching and preconnect to avoid any slow nested lookups
  • Add in font-display: swap; in the CSS describing the font
  • Host fonts locally, and use the CDN by default, before falling back to locally served if not found

• Font CSS: Per https://google-webfonts-helper.herokuapp.com/fonts/anonymous-pro?subsets=latin, here's the baseline code i'd need to use:

  
  /* anonymous-pro-regular - latin */
  @font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/anonymous-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
     url('../fonts/anonymous-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/anonymous-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
     url('../fonts/anonymous-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
     url('../fonts/anonymous-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
     url('../fonts/anonymous-pro-v14-latin-regular.svg#AnonymousPro') format('svg'); /* Legacy iOS */
  }

/ anonymous-pro-700 - latin / @font-face { font-family: 'Anonymous Pro'; font-style: normal; font-weight: 700; src: url('../fonts/anonymous-pro-v14-latin-700.eot'); / IE9 Compat Modes / src: local(''), url('../fonts/anonymous-pro-v14-latin-700.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('../fonts/anonymous-pro-v14-latin-700.woff2') format('woff2'), / Super Modern Browsers / url('../fonts/anonymous-pro-v14-latin-700.woff') format('woff'), / Modern Browsers / url('../fonts/anonymous-pro-v14-latin-700.ttf') format('truetype'), / Safari, Android, iOS / url('../fonts/anonymous-pro-v14-latin-700.svg#AnonymousPro') format('svg'); / Legacy iOS / }

/ anonymous-pro-italic - latin / @font-face { font-family: 'Anonymous Pro'; font-style: italic; font-weight: 400; src: url('../fonts/anonymous-pro-v14-latin-italic.eot'); / IE9 Compat Modes / src: local(''), url('../fonts/anonymous-pro-v14-latin-italic.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('../fonts/anonymous-pro-v14-latin-italic.woff2') format('woff2'), / Super Modern Browsers / url('../fonts/anonymous-pro-v14-latin-italic.woff') format('woff'), / Modern Browsers / url('../fonts/anonymous-pro-v14-latin-italic.ttf') format('truetype'), / Safari, Android, iOS / url('../fonts/anonymous-pro-v14-latin-italic.svg#AnonymousPro') format('svg'); / Legacy iOS / }

Likewise code for serif titles: https://google-webfonts-helper.herokuapp.com/fonts/im-fell-great-primer?subsets=latin
```css
/* im-fell-great-primer-regular - latin */
@font-face {
  font-family: 'IM Fell Great Primer';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/im-fell-great-primer-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/im-fell-great-primer-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/im-fell-great-primer-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/im-fell-great-primer-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/im-fell-great-primer-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/im-fell-great-primer-v12-latin-regular.svg#IMFellGreatPrimer') format('svg'); /* Legacy iOS */
}

[JasonYao]

Defaults for fonts:

• Normal serif font fallback: Georgia
• Normal monospace font fallback: Courier New

[JasonYao]

no need to add in prefetch or preconnect since we're sticking with local files that are served from our domain. We also don't lose out on CDN-goodness since we're fronted by cloudfront anyways, so these fonts just get distributed to our CDN's edge anyways