Online Workshop - Block Theme Builders: Choosing & Using Fonts

[colorful-tones]

Event Details

• Title: Block Theme Builders: Choosing & Using Fonts
• Target Audience: WordPress Users and Builders with an interest in block theme development and design
• Date: Thursday, September 15 2022
• Meetup.com event link: https://www.meetup.com/learn-wordpress-online-workshops/events/288329285/
• Co-host: @wparasae

There is no question that typography is a critical design choice when creating a WordPress theme.

What goes into deciding which font(s) to use? Where might you get your fonts? How do you hook your font up within a block theme? What are variable fonts, and should you use them?

In this workshop we will explore:

• Some considerations for choosing a font
• Where to find fonts and how to download and convert to proper formats
• A brief overview of variable fonts and when to consider using them
• How to hook up a font in a block theme (hint: theme.json)
• Discuss the future of fonts in WordPress full site editing

Online Workshop Checklist:

• Create Online Workshop event on Learn WordPress Online Workshops
• Add Online Workshop to Online Workshop calendar
• Assign Co-host to event (Remove the "Needs Co-host" tag from issue once assigned)
• Hold Online Workshop
• Complete After an Online Workshop next steps
• Add link to slides and/or WordPress.tv video to GitHub issue

[colorful-tones]

Goals:

• Picking a font from Google Fonts (or alternative)
  • reasoning: readability, aesthetics
  • downloading and converting to .woff2
  • placing in theme structure
• Using theme.json fontFamily entry to declare
• Using theme.json to specify and use a specific font family
• Using variable fonts: considerations for font weight usage, the performance impact
• The future of the Webfonts API in Gutenberg

Choosing fonts

Different Providers

• Google Fonts
• Bunny Fonts
• Fonts.com
• Dafont
• Behance
• Dribbble

Key considerations

Make sure it is a web font. Some fonts have both desktop and web fonts bundled. You'll want to ensure that the font has been designed and formatted for the web. It is also essential to remember that everyone's computer comes loaded with system fonts. Different operating systems can have different fonts, e.g., macOS, Windows, Ubuntu. Web fonts are often loaded from either the same server your site is being hosted on or a 3rd-party font host, like Google Fonts.

If you plan on submitting your block theme to the WordPress.org public repo, you'll want to ensure your font is GPL compatible and typically include the SIL Open Font License alongside the font in your theme's file structure.

It is highly recommended always to use fonts locally and host them alongside your site's source code, instead of a 3rd-party hosting service. Here are some reasons:

• They typically will load faster for end users
• You have control over precisely what font files are being served
  • Sometime, 3rd-party font providers will update fonts files without notice
• Only a single point of failure, i.e., if your server is having issues serving your font, then that is likely something you have more control over and can fix. Whereas, if Google or any other font provider's servers are having issues, you have no control over how quickly they will be addressed.

[colorful-tones]

Final recording of workshop on WordPress.tv https://wordpress.tv/2022/09/15/block-theme-builders-choosing-using-fonts/

[colorful-tones]

Closing this out as complete.