Fonts: cannot upload custom font that exists in Google Fonts

[swissspidy]

Bug Description

Originally reported at #11305 (comment)

When going to Stories -> Settings -> Custom Fonts and uploading a font, we check whether the font already exists—either as a custom font, system font, or Google Font. The reason is that we want to prevent duplicate entries in the fonts dropdown, as that would lead to weird UX.

That means one cannot upload a custom Roboto font, as that already exists in the Google Fonts list.

Expected Behaviour

One should probably be able to use custom fonts in favor of remote hosted Google Fonts.

Question is how we best solve that.

We could provide a filter as described in #11305, or just make custom fonts take precedence over Google Fonts. But then how does that affect existing stories?

Steps to Reproduce

1. Download a font file such as a Roboto font file from somewhere and upload it to your server
2. Try to add the font URL on the settings page
3. Get error

Screenshots

Additional Context

• Plugin Version: 1.36.0
• WordPress Version: 6.5
• Operating System: macOS
• Browser: Chrome

[swissspidy]

Question is how we best solve that.

We could provide a filter as described in #11305, or just make custom fonts take precedence over Google Fonts. But then how does that affect existing stories?

A filter to simply disable Google Fonts altogether breaks a lot of things, such as the Getting Started story and text presets (TEXT_ELEMENT_DEFAULT_FONT)

A POC for allowing custom fonts with the same name as a Google font would probably look like this:

1. In Font_Controller::prepare_item_for_database() / Font_Controller::font_exists() only fail if $response->get_data() contains any custom fonts. If not, ignore.
   • This allows uploading a custom Roboto font even though Roboto is in the Google Fonts list
2. In Font_Controller::get_items() use array_filter to remove any fonts returned by $this->get_builtin_fonts() that exist as a custom font.
   • In other words: avoid duplicates.

Questions:

• Should uploading a custom system font such as Arial be allowed?
  • Probably not. I don't see why.
• If I upload a custom Roboto font, how does that affect TEXT_ELEMENT_DEFAULT_FONT (which is used when inserting a new text element)? If the user doesn't make a change the story would then still use Google Fonts
  • Right now I don't see a way to

Testing scenarios:

a) New story

1. Upload a custom Roboto/Arial/so font on the settings page
2. Create a new story and insert a new text element
3. What happens?

b) Existing story

1. Create a new story, add a text element with a Google font other than Roboto
2. On the settings page, add a custom variant of that font
3. What happens?

Alternatives

Automatically host fonts locally

Instead of doing this, we could instead just automatically download the Google Fonts to the server (e.g. to wp-content/web-stories or something ) and serve them locally. That would help with performance.

Main question is: (how) are fonts deleted again? And if a remote font is updated, how do we update it on the server?

This could be done like this:

• Upon saving a story, somehow get a list of all the used Google Fonts and download them (if not already on the server)
  • Download upon saving ensures that viewing the story is still fast and a cached font is always available
  • Can probably download the font file and the CSS, and then do the URL replacement upon viewing
• When viewing the story, in a custom AMP sanitizer, remove the Google Fonts stylesheet in favor of some inline CSS referencing all the downloaded fonts, with the correct URL.

This was previously raised in #12597.

Recommend a third-party plugin for local-hosted Google FOnts

In the past I tested an existing WordPress plugin for doing the above, but it didn't quite work with the Web Stories plugin.

Maybe if we could find a working plugin, we can simply recommend using that instead.

Edit: it was Dan0sz/host-webfonts-locally#2

cc @Swanand01 for thoughts

[Swanand01]

Question is how we best solve that.
We could provide a filter as described in #11305, or just make custom fonts take precedence over Google Fonts. But then how does that affect existing stories?

A filter to simply disable Google Fonts altogether breaks a lot of things, such as the Getting Started story and text presets (TEXT_ELEMENT_DEFAULT_FONT)

A POC for allowing custom fonts with the same name as a Google font would probably look like this:

1. In Font_Controller::prepare_item_for_database() / Font_Controller::font_exists() only fail if $response->get_data() contains any custom fonts. If not, ignore.

   • This allows uploading a custom Roboto font even though Roboto is in the Google Fonts list

2. In Font_Controller::get_items() use array_filter to remove any fonts returned by $this->get_builtin_fonts() that exist as a custom font.

   • In other words: avoid duplicates.

Questions:

• Should uploading a custom system font such as Arial be allowed?

  • Probably not. I don't see why.

• If I upload a custom Roboto font, how does that affect TEXT_ELEMENT_DEFAULT_FONT (which is used when inserting a new text element)? If the user doesn't make a change the story would then still use Google Fonts

  • Right now I don't see a way to

Testing scenarios:

a) New story

1. Upload a custom Roboto/Arial/so font on the settings page
2. Create a new story and insert a new text element
3. What happens?

b) Existing story

1. Create a new story, add a text element with a Google font other than Roboto
2. On the settings page, add a custom variant of that font
3. What happens?

Alternatives

Automatically host fonts locally

Instead of doing this, we could instead just automatically download the Google Fonts to the server (e.g. to wp-content/web-stories or something ) and serve them locally. That would help with performance.

Main question is: (how) are fonts deleted again? And if a remote font is updated, how do we update it on the server?

This could be done like this:

• Upon saving a story, somehow get a list of all the used Google Fonts and download them (if not already on the server)

  • Download upon saving ensures that viewing the story is still fast and a cached font is always available
  • Can probably download the font file and the CSS, and then do the URL replacement upon viewing

• When viewing the story, in a custom AMP sanitizer, remove the Google Fonts stylesheet in favor of some inline CSS referencing all the downloaded fonts, with the correct URL.

This was previously raised in #12597.

Recommend a third-party plugin for local-hosted Google FOnts

In the past I tested an existing WordPress plugin for doing the above, but it didn't quite work with the Web Stories plugin.

Maybe if we could find a working plugin, we can simply recommend using that instead.

Edit: it was Dan0sz/host-webfonts-locally#2

cc @Swanand01 for thoughts

Hi, I looked for and found a few plugins that allowed hosting Google fonts locally, but I wanted to know what exactly we expect from these plugins. How would this solve the problem of the user not being able to upload a custom font?

[swissspidy]

How would this solve the problem of the user not being able to upload a custom font?

In this reported use case, the user wanted to upload a custom Roboto font to avoid loading it externally from Google Fonts. If they can use a plugin that automatically downloads Google Fonts and serves them locally, that would address their need without having to upload a custom font.

In other words:

User need: do not load Roboto font from external service
Their attempted workaround: upload same font locally, hoping that it overrides the one from Google Fonts. Very annoying if you have to do this for dozens of fonts.
Better solution: automatically serve Google Fonts locally, without having to worry about or upload custom fonts. Works automatically, user can just relax and focus on creating stories.

Does that make sense?

[Swanand01]

How would this solve the problem of the user not being able to upload a custom font?

In this reported use case, the user wanted to upload a custom Roboto font to avoid loading it externally from Google Fonts. If they can use a plugin that automatically downloads Google Fonts and serves them locally, that would address their need without having to upload a custom font.

In other words:

User need: do not load Roboto font from external service Their attempted workaround: upload same font locally, hoping that it overrides the one from Google Fonts. Very annoying if you have to do this for dozens of fonts. Better solution: automatically serve Google Fonts locally, without having to worry about or upload custom fonts. Works automatically, user can just relax and focus on creating stories.

Does that make sense?

Got it, thanks a lot for the explanation!
Would you mind taking a look at this Local Google Fonts plugin?
It appears this can solve our problem.

[swissspidy]

Have you tried it already and does it work for stories?

[Swanand01]

Tested it for a variety of fonts, but it was able to serve only a few of those locally.
However, I looked for similar plugins and found this: EasyFonts

I tested this plugin with a variety of fonts across multiple stories, and it was able to serve all the fonts locally.
Please note the domain column in the above screenshot.

[swissspidy]

Awesome, that is excellent, thanks for testing @Swanand01!