feat: Add font-display swap support to font loading

[callinmullaney]

READY FOR REVIEW

Summary

• Adds font-display="swap" css property to font loading in order to increase site performance and lighthouse scores

Needed By (Date)

• ASAP

Urgency

• low

Steps to Test

1. Review each google font link imported in CSS. Verify the corresponding stylesheets load with the @font-face selector including the font-display: swap property.

Affected Projects or Products

• Stanford HumSci platform. Various performance audits recommend this font-display: swap value added to @font-face in order to increase font loading - see https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display and https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/

See Also

• PR Checklist

[yvonnetangsu]

Add

Hmm I'm generally ok with this, except for perhaps the Stanford logo font 🤔 I actually have tested the display=swap before, but it creates a flash of different fonts which I think is fine for text, but not sure if we want that for the Stanford logo? It will show the logo as a serif fallback font before the Stanford font finish loading. I don't feel too strongly about it but perhaps UComm branding might have issues with that 🤷🏼‍♀️

cc @iamrentman @callinmullaney

[iamrentman]

Thanks @yvonnetangsu. I agree, not with the Stanford ligature font.

That is, let's remove from Stanford font.

[callinmullaney]

Thank you @iamrentman and @yvonnetangsu for taking a look at this pull request. I've removed the font-display: swap; from the stanford @font-face. Back to you!

[yvonnetangsu]

@sherakama I think this PR is ready to merge but do we have a problem with the PR labeler? I seem to remember you removed it in another repo.

[sherakama]

I think this PR is ready to merge but do we have a problem with the PR labeler? I seem to remember you removed it in another repo.

Yeah, it doesn't have a lot of value for us so I have been removing it.

[sherakama]

GTG