Font Library: settings for using local vs. remotely hosted fonts

[creativecoder]

The default behavior for installing fonts to a site's Font Library from a font collection is to upload the font, so that it is hosted on the site.

This may not be the desired behavior, depending on who hosts the remote font and what the site owner desires. Remote hosting with a CDN may be more performant for loading the font, but may also come with privacy concerns.

For the site, whether to host the font locally or host from the source should be configurable (via hooks, if not through the UI).

The provider of a font collection, when not bundling fonts for distribution in a plugin but hosting them on a server, may or may not want their server used as a font CDN, so should be able to specify if downloading the font to the site is required to use it.

More information about Font Collections, for context: https://github.com/WordPress/gutenberg/issues/57980

[creativecoder]

An initial idea for the design of this setting:

• For the site, add a Site editor setting that specifies whether a font is uploaded to the site or not when installing vs referencing the remote url.
• For the collection, add a require_download config option when registering the collection, so that the Font Library downloads the font from the collection and then uploads it to the site when it's installed.

This leaves open the question when these settings oppose each other: a collection requires downloading, but the editor is set to use the remote font url as its src.

• If the editor setting is a requirement, we would need to show a notice in the collection tab that its fonts are not available to install, because it must be downloaded before it can be used.
• If the editor setting is more like a preference, the font could still be uploaded to the site when installing (in the same way it would be if the user uploaded font files directly to the Font Library).

[creativecoder]

Noting there are a couple existing explorations of adding settings for this:

• https://github.com/WordPress/gutenberg/pull/57989
• https://github.com/WordPress/gutenberg/pull/58030

[pbking]

Well put @creativecoder thank you.

Below are the scenarios that I have considered. I'm not sure if all of them would be legit scenarios so maybe we could simplify by eliminating something. Or maybe I missed a scenario completely. But this is where my head has been...

Host only wants users to install the fonts that they provide via a plugin. The host builds the custom plugin which provides a list of fonts that a user can install. All users get this list of fonts they can activate and no others. These are what they support. The host only serves locally hosted assets provided by a plugin.

• Collections that Require Installation 🚫
• Collections that Don't Require Installation 🚫
• Plugins that Provide Font Resources 👍
• Uploaded Fonts 🚫

Host wants to allow users to install fonts from wherever they want, but won't allow the fonts to be hosted from a CDN. This includes the default fonts, other fonts added via plugins or other fonts that users may want to upload to install. The host will serve only locally installed fonts.

• Collections that Require Installation 👍
• Collections that Don't Require Installation 👍 (assets will be uploaded)
• Plugins that Provide Font Resources 👍
• Uploaded Fonts 👍

A host will allow fonts to be used and doesn't care where they are hosted. They can be uploaded and installed. A font provider will provide fonts and will allow those font resources to be loaded from their CDN. Another font provider will provide fonts and won't allow them to be served from their CDN. The system will have a mix of self and remote hosted resources.

• Collections that Require Installation 👍
• Collections that Don't Require Installation 👍 (assets will be referenced from CDN)
• Plugins that Provide Font Resources 👍
• Uploaded Fonts 👍

A host will allow users to install fonts, but won't allow resources to be uploaded. Only remotely provided fonts and fonts with resources provided in plugins can be used. Uploading fonts won't be allowed. Collections that provide fonts that must be installed cannot be used. Plugins that supply font resources can be used. Collections that allow font resources to reference the font CDN can be used.

• Collections that Require Installation 🚫
• Collections that Don't Require Installation 👍 (assets will be referenced from CDN)
• Plugins that Provide Font Resources 👍
• Uploaded Fonts 🚫

[matiasbenedetto]

Closely related issue: https://github.com/WordPress/gutenberg/issues/58883

[creativecoder]

Noting that another setting we need to consider is the constant DISALLOW_FILE_MODS. If we're treating font files like themes/plugins/language packs (rather than uploads), then uploading font files to the site will not be possible if that constant is true.

[asafm7]

Unless I'm missing something, currently there isn't an option to load Google Fonts remotely.

Is it planned?

[creativecoder]

Unless I'm missing something, currently there isn't an option to load Google Fonts remotely.

It's technically possible the load a font remotely (because global styles supports it), but correct that there's currently no option to do so in the font library modal.

Is it planned?

It's planned in the sense that some of us who have been working on the feature want to add it 😄

[asafm7]

Thanks @creativecoder.

It's technically possible the load a font remotely (because global styles supports it)

Does it mean it can be done with a filter?

[creativecoder]

Does it mean it can be done with a filter?

Not currently. Using the wp/v2/font-families/<id>/font-faces endpoint, you can provide a remote url for the src of the font when creating a new font-face, and global styles will use that url to load the font when it's activated. This works the same way as providing a remote url as the fontFace src in theme.json.

[asafm7]

Thanks, @creativecoder.

You refered to https://developer.wordpress.org/themes/global-settings-and-styles/settings/typography/#registering-web-fonts-font-faces for the option of providing a remote URL.

I was actually going through this page before and couldn't find such an option mentioned, and was not able to make it work with guesswork.

Do you maybe know how to provide a remote URL in the theme.json fontFace?

Thanks.

[creativecoder]

@asafm7 Here's an example, loading "Inter" from Google Fonts directly.

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "typography": {
            "fontFamilies": [
                {
                    "fontFace": [
                        {
                            "fontFamily": "Inter",
                            "fontStretch": "normal",
                            "fontStyle": "normal",
                            "fontWeight": "400",
                            "src": [
                                "https://fonts.gstatic.com/s/inter/v3/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2"
                            ]
                        }
                    ],
                    "fontFamily": "\"Inter\", sans-serif",
                    "name": "Inter",
                    "slug": "body"
                }
            ]
        }
    }
}

[asafm7]

Thanks @creativecoder.