Control Page

Does not contain Adobe Fonts Embed

Page: [Control Layout] Clean Page  

  • First tested: 2021-04-18T23:53:34.597Z UTC
  • Last tested: 2021-06-25T08:55:58.317Z UTC
  • Times tested to date: 100
Aggregate Average Score
99 Mobile
100 Desktop

Test Page

Contains Adobe Fonts Embed

Page: [Test Layout] Adobe Fonts Embed – 1 Font Family  

  • First tested: 2021-04-25T08:06:12.606Z UTC
  • Last tested: 2021-06-25T09:01:18.252Z UTC
  • Times tested to date: 88
Aggregate Average Score
95 Mobile
100 Desktop

Aggregate Difference

  • Mobile: 4 points (5.95% slower)
  • Desktop: 0 points (0% slower)

Test Method

Results are cumulated and averaged over the time period between the first tested and last tested dates. I send automated daily* requests to the PSI API for both mobile and desktop strategies, add the latest result for each strategy to its corresponding existing tally, then divide the tally by the number of times the test was performed, and round it to the nearest integer.

Formula: result ≈ Σ[day results] / times tested to date where ‘≈’ means rounded to nearest integer

* Additional tests are occasionally performed between the scheduled daily runs, so the times tested to date rubric will most likely not correspond to the number of days between first tested and last tested.

Embed Code Used

As provided by Adobe Fonts, IDs blotted out:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">

Potential Solutions

Load the font locally instead of remotely; strip unwanted characters to further reduce filesize

I don’t know the Adobe Fonts policy on this, but it’s possible to convert Adobe fonts to a webfont set and load them directly from your own server instead of from Adobe.

Keep in Mind

If you’re going to move your fonts from Adobe’s decent CDN, you should make sure your hosting is good enough to preserve the speed gains you’ll get from making local instead of remote calls. It doesn’t have to be better than Adobe’s, but it has to be good enough to not cancel out any potential gains.

Steps

  1. Activate your Adobe Fonts
  2. Find instructions on how to locate the OTF versions of the desired Adobe Fonts on your local machine (example for macos)
  3. Convert them to webfont sets for use with @font-face here, here, or here
    • select only the language subset you want; this can drastically reduce the filesize of your webfont files by leaving out characters specific to languages you won’t need (in the case of English, the weight loss for most fonts I tested is over 60%)
    • mind your leading; test the line-height of your converted fonts in an actual layout, as it may change during the conversion. This would be mostly visible in elements like buttons and form fields, where you might suddenly see uneven vertical gutters. If this happens, reconvert with different settings; find an online convertor that preserves the original leading (line-height) or gives you the option to control it
  4. Store the webfonts on your server and serve them locally in the usual way
    • ensure you truly need all the font families and variants you include (example case: if your site only uses italics in one sentence in a secondary layout, probably not worth it to include the italic variants)
  5. Check your before and after speed scores multiple times

  cp@cristianpopa.com

 404 487 8657

Let's Talk