GoogleForCreators / web-stories-wp

Web Stories for WordPress
https://wp.stories.google
Apache License 2.0
766 stars 177 forks source link

Custom Fonts Support #4717

Closed swissspidy closed 2 years ago

swissspidy commented 4 years ago

Feature Description

Some users have expressed interest in being able to use custom fonts that are not available on Google Fonts (example). For example, fonts that have extended support for languages like Persian.

Fonts that have been mentioned include:

https://github.com/rastikerdar/vazir-font https://github.com/rastikerdar/shabnam-font https://fontiran.com/%d8%ae%d8%a7%d9%86%d9%88%d8%a7%d8%af%d9%87-%d9%81%d9%88%d9%86%d8%aa-%d8%a7%db%8c%d8%b1%d8%a7%d9%86-%d8%b3%d9%86-%d8%b3%d8%b1%db%8c%d9%81-iran-sans-%d9%be%d9%86%d8%ac-%d9%88%d8%b2%d9%86-%d9%87%d9%85/ https://fontiran.com/%d9%81%d9%88%d9%86%d8%aa-%d8%a7%db%8c%d8%b1%d8%a7%d9%86-%db%8c%da%a9%d8%a7%d9%86-iran-yekan/

Enabling users to upload custom fonts like these would probably require quite some work as we need to support multiple variants per font, various file types per variant, and also need to extract metrics from the fonts like we do for all the other fonts.

Alternatives Considered

Additional Context

Possibly related: #4614

For extracting font metrics we use opentype.js which luckily also supports running in the browser. So that would be possible to implement without any workarounds (e.g. using an API for that).


Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

Implementation Brief

roadsunknown commented 3 years ago

The AMP specification does support custom fonts (https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts/?format=websites). As well, many themes and plugins (e.g. https://wordpress.org/plugins/custom-fonts/) already support custom fonts so there is significant experience in the community. Also, users who are already using custom fonts should be able to reference existing fonts stored in the media library.

swissspidy commented 3 years ago

Those are good resources, thanks for referencing them here.

One important aspect to consider is that we‘d need to calculate font metrics for any font supplied, so that highlight mode for text elements works smoothly.

dreamofabear commented 2 years ago

Potential issue: opentype.js doesn't support WOFF2, but there are other libraries that do. https://github.com/opentypejs/opentype.js/issues/183

Looks like articles like this random WSJ piece use WOFF2.

bmattb commented 2 years ago

assigning to @agingoldseco as we are waiting on the updated designs for this

bmattb commented 2 years ago

I have moved this epic to the Epics column