Load Ubuntu font dynamically when not found locally

[matthewpaulthomas]

1. Go to snapcraft.io/blog. 2. Open your browser’s network monitor (e.g. Chrome “Tools” > “Developer Tools” > “Network”). 3. Shift+Reload, to simulate someone arriving on this page for the first time.

What happens: 358 KB of Ubuntu font files are downloaded.

(On snapcraft.io/, only the first two are downloaded, apparently because that page doesn’t use italics.)

What should happen: No font files are downloaded.

• snapcraft.io is not an Ubuntu-specific site, so there’s no branding reason for it to use the Ubuntu font.
• Even if it’s preferred, I already have the font installed, so downloading it again is redundant.
• The site would be faster without it.

[Originally reported as part of #1067.]

[therealjuan-zz]

snapcraft.io is not an Ubuntu-specific site, so there’s no branding reason for it to use the Ubuntu font.

The Snapcraft logo is designed with the Ubuntu font family, therefore, the Ubuntu font family is indeed part of the branding. As well as for other products from Canonical like MaaS, JuJu or Vanilla.

Even if it’s preferred, I already have the font installed, so downloading it again is redundant.

From a user's perspective this will be the right thing to do. Technically speaking, it is not how browsers handle font families. They will look first for the ubuntu font family in the system and if it is not found will fallback to the remaining font families specified in the stylesheet. If the font is not found, there is no way currently for a browser to request loading this font and that is the reason why the font gets loaded.

The site would be faster without it

The site wouldn't be faster but it will load faster but in this case, the site wouldn't be using the correct branding.

[matthewpaulthomas]

The Snapcraft logo is designed with the Ubuntu font family, therefore, the Ubuntu font family is indeed part of the branding.

Sure, but that in itself is not a branding reason to use Ubuntu font for the site in general. YouTube, Facebook, Wikipedia, Yahoo, and Amazon are popular examples of sites that use a particular font in their wordmark, and could use the same font as a webfont for headings etc throughout the site, but choose not to.

browsers … look first for the ubuntu font family in the system and if it is not found will fallback to the remaining font families specified in the stylesheet

Yes, but I don’t think that’s relevant to this bug report, which is about the webfont, not the choice of fallback. The most they have to do with each other is that it’s rather weird for the fallback to include -apple-system,BlinkMacSystemFont, as if we care about trying to use your OS’s system UI font, only to download 350 KB of webfont to avoid that happening!

One way of avoiding a redundant download might be to have a script which calls getComputedStyle() on the text, then downloads the webfont only if the text isn’t already using the Ubuntu font. That might be impractical if it results in FOUT for everyone else, though.

[matthewpaulthomas]

I just realised that you can estimate the proportion of snapcraft.io visitors, for whom the font download is pointless, by multiplying the % of snapcraft.io visitors using “Linux” (excluding Android) by the % of non-core snap installations that are from Ubuntu users (as a proxy for the % of snapcraft.io “Linux” visitors using Ubuntu). I won’t post it here because this tracker is public, but the result is rather high.

[therealjuan-zz]

I believe this needs technical investigation as of Today I am not 100% sure that we can detect if a browser can render a font locally and dynamically load a font.

I will reopen this issue and add as a low priority item to the backlog as the cost is higher to the benefit for the user. We are talking about 300kb (size of an image) on (usually only) first-load.

[therealjuan-zz]

Sure, but that in itself is not a branding reason to use Ubuntu font for the site in general. YouTube, Facebook, Wikipedia, Yahoo, and Amazon are popular examples of sites that use a particular font in their wordmark, and could use the same font as a web font for headings etc throughout the site, but choose not to.

It happens that the whole range of our product portfolio uses Ubuntu as a font. If the branding needs to be revisited is worth a discussion before we get into any conclusions.

Sites with a high volume of traffic like Airbnb, Amazon, Gmail (latest redesign), Uber (they released their own web font last month) or DigitalOcean use the same font on their sites as the font used in their wordmark. All these sites don't go beyond 100 kb so we can also look why the ubuntu font needs 300 kb.

[fitojb]

(By the way, as long as you use the Ubuntu Thin font in web but don’t package it in the OS, it doesn’t make sense to ask to drop web font loading.)

[matthewpaulthomas]

our product portfolio

This is a trade-off: presenting snaps, on their own site, as part of Canonical’s “product portfolio” may reassure ISVs that snaps have Canonical backing, but also hurt adoption on other Linux OSes if it contributes to an impression that they’re an Ubuntu-centric boondoggle. But I guess the font is a much smaller factor here than the new Canonical top bar! The obvious comparison here is flatpak.org, which has both a different font and completely different site design than its main sponsor.

we can also look why the ubuntu font needs 300 kb

as long as you use the Ubuntu Thin font in web but don’t package it in the OS, it doesn’t make sense to ask to drop web font loading

ubuntu.com uses Ubuntu Thin, but I haven’t seen snapcraft.io use it. That raises a good point, though:

Variant	Characters	Version	Size
Light	1195	0.83	125 KB
Regular	1195	0.83	109 KB
Light Italic	1195	0.83	124 KB
Thin	1195	0.84	57 KB :+1:

So, maybe if the other variants were regenerated in the same way as the Thin was, they would halve in size?

[therealjuan-zz]

In Snapcraft.io we have Ubuntu Thin in multiple places:

Tracing the origin of the -apple-system, BlinkMacSystemFont declaration, it comes from the vanillaframework which is including method #1 suggested here

We're also not able to determine if you are on Ubuntu 100% of the time which does not give any option to avoid downloading the font.

Using javascript to check if a font is in the system to download dynamically, will result in blinking styles so the impression when loading the site might be problematic and doing this might be something more of a vanilla framework issue than Snapcraft.io.

The only option left is to investigate why Ubuntu Thin is the only font in 0.84 with half the size instead of others which can be reported here

Closing as this is not related to snapcraft.io.