Add default fonts and optional font presets

[carolinan]

This is a tracking issue for adding font families.

Fonts used in the default style

• Manrope https://fonts.google.com/specimen/Manrope

Font presets

• Beiruti & Literata 60pt
• Volkorn + Fira Code Figma: https://www.figma.com/design/dzGCSntVch4EQdVERTqyVK/Twenty-Twenty-Five?node-id=77-338&t=a2aCFTzN27im2gFp-4
• Platypi + Ysabeau Office
• Roboto Slab + Manrope
• Literata 60pt + Ysabeau Office
• Platypi + Literata 60pt
• Literata 60pt + Fira Sans

Google fonts hub for Literata:
https://fonts.google.com/specimen/Literata
Source files with 60pt static: https://drive.google.com/file/d/10gXtroY3pgFzJ43CUaDM5aNPwp96LOOc/view

---

• All fonts have license information and source added to the readme.txt
• The fonts have been tested to ensure support for different languages (charsets)
• The fonts have been tested with the footnotes (It uses a glyph that at one point was found missing in Inter)

[carolinan]

Let's discuss how to name and organize the presets?

• Font presets are partial .json files that only contain typography settings (It can include more than one font family).
• Each preset uses its own file.
• Each file needs to include version, schema, slug, and title.
• The files need to be placed in the styles folder, but it is also possible to organize the files using subfolders, for example
  styles/typography.

As discussed in #3 it would be good to standardize the naming.

[carolinan]

We also need to know which font weights and font styles that needs to be added, both for the download, and for theme.json.

[beafialho]

I believe some of these are variable, can we add the variable font file?

[LittleBigThing]

I believe some of these are variable, can we add the variable font file?

I think that it is better to use separate font files for each weight. Variable font files are large. The font weights that are not used on a page are mostly not loaded by the browser (also, they are not enqueued in unselected in the Font Library?). So using separate font files should make the page size smaller.

[carolinan]

@kafleg it looks like Beiruti and Robot Slab are not added to the theme?

[carolinan]

I believe some of these are variable, can we add the variable font file?

I think that it is better to use separate font files for each weight. Variable font files are large. The font weights that are not used on a page are mostly not loaded by the browser (also, they are not enqueued in unselected in the Font Library?). So using separate font files should make the page size smaller.

This is an interesting point. Long-term, variable fonts are easier to maintain since there are fewer files, but the performance for the user and website visitors is more important.

Do you have any reliable sources (articles) that show if the non-variable fonts are faster? The number of HTTP requests should also be considered.

[carolinan]

Let's revisit the performance question after the performance review.

[askdesign]

I believe some of these are variable, can we add the variable font file?

I think that it is better to use separate font files for each weight. Variable font files are large. The font weights that are not used on a page are mostly not loaded by the browser (also, they are not enqueued in unselected in the Font Library?). So using separate font files should make the page size smaller.

This is an interesting point. Long-term, variable fonts are easier to maintain since there are fewer files, but the performance for the user and website visitors is more important.

Do you have any reliable sources (articles) that show if the non-variable fonts are faster? The number of HTTP requests should also be considered.

Found some information:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide
https://ckeditor.com/blog/optimize-font-size-with-variable-fonts/

• Yes, variable font file size is typically larger than a single font file size. However, it's smaller than the collection of single font file sizes.