Web-stories-wp: Use the whole contents to load the correct font

[dvoytenko]

Bug Description

(Blocked by #921)

The different font styles are not loaded in the output document. A similar problem could also be present in the editor as well.

1. Enter a text element
2. Set "Roboto" font
3. Customize different parts of it using side panel and text selection as well. Use italics and bold.
4. Save and preview.

Let's assume that the resulting content was:

some text
<strong>some bold</strong>
<i>some italic</strong>
愛 means "love" in Japanese

The resulting document is observed to have:

<link rel="stylesheet" id="edit-story_fonts-css" href="https://fonts.googleapis.com/css?family=Roboto%3A400%7C&amp;subset=latin%2Clatin-ext&amp;display=swap&amp;ver=1.0.0-alpha" media="all">

Expected:

• "Roboto:ital" for italic styles/contents
• "Roboto:...wght" for 700 (bold), etc.
• Possibly even a more expanded character subset to capture Japanese.

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

QA Instructions

[spacedmonkey]

So it is worth noting that, the when Roboto in the editor, it loads all the font variants. This may seem waste and it is, but was done to make sure that if the user changes the weight or style of the text, the font is already in the browser, Waiting for a new font to load in while a font is set to bold is jarring.

I do agree through that in the FE ( story that is presented to the user ), we should not load all the fonts. I think we should only load correct styles and font weights. We can also limit the font by the characters used to give an even smaller font file to the user. But that benefit of this maybe limited by the download be slower, is the query string is not cached in CDN etc.

[ndev1991]

@kmyram This seems blocked by #921, but it's not on the list of next sprint?

[miina]

@obetomuniz Will assign this to you since most likely you'll cover it in #1275
Feel free to unassign yourself if it comes out that the PR won't be addressing it afterall.