Opting-in to the new EMBL/EMBL-EBI typeface on VF 1.x sites

[khawkins98]

Agreed at higher-level design+leadership, EMBL and EMBL-EBI are moving to a new typeface: Plex. I won't get into the background on that here, but it has been discussed at length. (if needed, I'm sure I can find links)

That new font will be the default for VF 2.0, however what we've yet to iron out is:

1. How can VF 1.x sites can opt-in to the new font? and
2. If/when VF 1.1/2/3 are "forced" to the new font?

I think No. 2 isn't a near-term thing (and may never happen), so I think we can stick to No. 1.

Currently the "best" approach I have in mind is to create a new optional Sass file + standalone CSS file that can be included in a build process or HTML document.

To illustrate:

some-repo/theme__new-type-for-embl-ebi.css

h1, h2, p, all-the-selectors {
  font: "the-new-embl-ebi-font";
}

• Pro: this is a super-simple opt-in.
• Downside: more CSS inheritance/specificity and possible flash of helvetica -> plex

Final question is where would this new code live?

• As part of VF 1.3?
• ... or part of VF 2.0?

And then we'd need to go through and update various templates and documentation to reference the new approach.

[khawkins98]

Have a proof-of-concept.

It works like this:

1. It's a VF 2.0 component
2. It's intended for use with vf 1.x sites
3. Included by <link rel="stylesheet" href="https://dev.assets.emblstatic.net/embl-design-system/develop/assets/ebi-vf1-integration/ebi-vf1-integration.css" />
4. Activated by adding .ebi-vf1-integration to a wrapping element or — ideally — doing body.ebi-vf1-integration
   • That means this can be scaled to cover an entire page or just specific areas
   • Draft doc page: https://dev.beta.embl.org/guidelines/design/components/ebi-vf1-integration/

Here's a demonstration fo what the EBI Services page looks like using it: https://codepen.io/khawkins98/pen/KKPBYGy?editors=1000