Skip to content
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

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

Open
Tracked by #60528
creativecoder opened this issue Jan 25, 2024 · 12 comments
Open
Tracked by #60528

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

creativecoder opened this issue Jan 25, 2024 · 12 comments
Labels
[Feature] Font Library [Status] In discussion Used to indicate that an issue is in the process of being discussed [Type] Enhancement A suggestion for improvement.

Comments

@creativecoder
Copy link
Contributor

creativecoder commented Jan 25, 2024

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: #57980

@creativecoder creativecoder added [Type] Enhancement A suggestion for improvement. [Status] In discussion Used to indicate that an issue is in the process of being discussed [Feature] Font Library labels Jan 25, 2024
@creativecoder
Copy link
Contributor Author

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
Copy link
Contributor Author

@pbking
Copy link
Contributor

pbking commented Jan 26, 2024

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
Copy link
Contributor

Closely related issue: #58883

@creativecoder
Copy link
Contributor Author

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
Copy link

asafm7 commented Mar 21, 2024

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

Is it planned?

@creativecoder
Copy link
Contributor Author

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
Copy link

asafm7 commented Mar 25, 2024

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
Copy link
Contributor Author

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
Copy link

asafm7 commented Mar 26, 2024

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
Copy link
Contributor Author

@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
Copy link

asafm7 commented Mar 27, 2024

Thanks @creativecoder.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Font Library [Status] In discussion Used to indicate that an issue is in the process of being discussed [Type] Enhancement A suggestion for improvement.
Projects
Status: Later
Development

No branches or pull requests

4 participants