Closed JasonYao closed 3 years ago
look into if style sheets can be defer
ed 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
Some articles on optimizing this to not slow us down:
https://www.smashingmagazine.com/2019/06/optimizing-google-fonts-performance/
font-display: swap;
in the CSS describing the fontFont 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 */
}
Defaults for fonts:
Georgia
Courier New
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
I miss my serif fonts