Can we add italics fonts support?

[Alex K. Fong]

Requesting italics fonts

Currently we don't initialize the italics fonts for Tiempos Text Regular and Tiempos Text Bold, which means project designs skew the Roman instead of switching to what is often a redrawn version of the font family. For more information, check out this article at CSS Tricks. Here's a good explanation by a type designer. Pay special attention to the "S" to see how skewing introduces unpleasant distortion.

Internal examples

ArchieML template from How 9/11 changed our lives

Notice that the skewing puts the stroke contrasts out of position.

The above example, set with real italics font

Here, the stroke contrasts match the Roman, so this better integrates within a copy block. Also, when using the real font instead of skewing, it means we can run italicized text at larger sizes without it beginning to look weird.

Next steps if we want to implement

1. Add @font-face declarations for to sfc.less

// I already checked to see if the italics files exist; they do. Not sure if the local value for `src` is right.
@font-face {
  font-family: 'Tiempos Regular';
  font-display: swap;
  font-style: italic, oblique;
  font-weight: 400;
  src: local('Tiempos Regular'), url("https://www.sfchronicle.com/css/core/fonts/tiempos/TiemposTextWeb-RegularItalic.woff2") format('woff2'), url("https://www.sfchronicle.com/css/core/fonts/tiempos/TiemposTextWeb-RegularItalic.woff") format('woff');
}

@font-face {
  font-family: 'Tiempos Bold';
  font-display: swap;
  font-style: italic, oblique;
  font-weight: 400;
  src: local('Tiempos Bold'), url("https://www.sfchronicle.com/css/core/fonts/tiempos/TiemposTextWeb-BoldItalic.woff2") format('woff2'), url("https://www.sfchronicle.com/css/core/fonts/tiempos/TiemposTextWeb-BoldItalic.woff") format('woff');
}

2. Could add to values.less in Gatsby as well if we'd like to more easily refer to the italics in CSS
3. I'm still learning how everything works, so I may be missing major major updates that would have to be made to do this

Overall outlook

After implementing Tiempos Text Regular Italic and Tiempos Text Bold Italic, we'd still be missing italics for our headline typefaces (Light, Medium and Black) and for National. It doesn't seem like we own these fonts and would have to ask central for them. I'd suggest at least covering us on our main headline typeface (Tiempos Headline Black) and for National, which we use for captions and boxes (National Regular and National Bold).