Skip to content

Third party font loading services' risks #494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions performance/font-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
- [font-display CSS](#font-display-css)
- [Loading fonts with JavaScript](#loading-fonts-with-javascript)
- [Preloading webfonts](#preloading-webfonts)
- [Self host webfonts if possible](#self-host-webfonts-if-possible)
- [Self host webfonts](#self-host-webfonts)

## When to use webfonts

Expand All @@ -30,12 +30,12 @@ As a Frontend Developer, it's your role to provide technical guidance and feedba

We do not prescribe a particular implementation. Each team should determine which implementation is best suited for them. However, before selecting an implementation a team should be mindful of our working practices such as:

- [Graded Browser Support](https://github.com/springernature/frontend-playbook/blob/main/practices/graded-browser-support.md)
- [Graded Browser Support](../practices/graded-browser-support.md)
- Is the implementation supported by all "enhanced" browsers? If not, is there a good justification for selecting it anyway?
- Does the implementation work in conjunction with the Cut The Mustard technique?
- [Progressive Enhancement](https://github.com/springernature/frontend-playbook/blob/main/practices/progressive-enhancement.md)
- [Progressive Enhancement](../practices/progressive-enhancement.md)
- This is not meant to force you to choose a non-js implementation, but rather for you to ensure you consider what will happen for users in varying circumstances from the beginning.
- [Our Performance Goals](https://github.com/springernature/frontend-playbook/blob/main/performance/performance-checklist.md)
- [Our Performance Goals](../performance/performance-checklist.md)
- What impact will the implementation have on the page performance of your site?

## Quick tips
Expand Down Expand Up @@ -76,10 +76,10 @@ If you have to load a font the conventional way using a `<link>` then consider u

### Self host webfonts

Any webfonts you use must be self-hosted - avoid using a font-hosting service.
[As any other static asset](../practices/managing-static-assets.md), any webfonts you use [MUST](../README.md#key-words) be self-hosted - avoid using a font-hosting service.

Every major browser now implements HTTP cache partitioning in order to prevent leaking of the users' browser history, and avoid cross-site tracking and cross-site search attacks. This means that there's no performance benefit from using an external service to host our webfonts.
As major browsers now implement HTTP cache partitioning to prevent leaking of the users' browser history and mitigate cross-site tracking and search attacks, there's no performance benefit from using an external service to host our webfonts.

Using an external font-hosting service can actually worsen performance in important markets like China, as opening a connection to a new host can sometimes be very slow, or even fail completely, due to the filtering done by the Great Firewall.
Using an external font-hosting service can negatively impact performance in markets like China, as opening a connection to a new host can sometimes be very slow, or even fail completely, due to the data filtering mechanism of the Great Firewall.

But most importantly, using external font-hosting services we risk passing personally identifiable information (PII) from your users to those font-hosting services, increasing the risk of litigation.
When self hosting the fonts is not possible due to for example licensing issues, you MUST ensure data protection policies are followed and user consent is obtained before connecting to remote origins. This practice prevents unauthorised disclosure of personally identifiable information (PII) to external services, reducing litigation risks.