Evaluate using variable fonts in Olivero

Created on 16 January 2025, 3 months ago

Problem/Motivation

I did some performance testing of Drupal CMS recently and noticed that Olivero loads five font files for two font faces, at a total of about 100kb.

I think it would be worth considering whether we'd be better off (or not worse off) with two variable fonts - this would be two files then, obviously need to see how big the font file would be.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

πŸ“Œ Task
Status

Active

Version

11.0 πŸ”₯

Component

Olivero theme

Created by

πŸ‡¬πŸ‡§United Kingdom catch

Live updates comments and jobs are added and updated live.
  • Performance

    It affects performance. It is often combined with the Needs profiling tag.

Sign in to follow issues

Comments & Activities

  • Issue created by @catch
  • πŸ‡¬πŸ‡§United Kingdom catch
  • πŸ‡ΊπŸ‡ΈUnited States mherchel Gainesville, FL, US
  • πŸ‡¬πŸ‡§United Kingdom catch
  • πŸ‡§πŸ‡ͺBelgium wim leers Ghent πŸ‡§πŸ‡ͺπŸ‡ͺπŸ‡Ί

    I noticed this too when I upgraded my site from Drupal 7 to 10.

    By far the largest jump in page weight is these 5 (!!!) fonts.

  • πŸ‡¦πŸ‡ΊAustralia rikki_iki Melbourne

    Metropolis doesn't have a variable font available that I can find.

    Lora does, though it's Italic variant is a separate file (glyphs are too different to simply slant).

    There's actually 6 fonts all up in Olivero's fonts.css... 3x Metropolis weights (roman), 2x Lora weights (roman) and 1x Lora italic.

    I'm not sure if replacing Metropolis with a similar font that has a variable version available is on the table, but that would at least get it down to 3 files.

    I also note the navigation module is loading Inter variable font - quite a large file too, probably a separate issue.

Production build 0.71.5 2024