How to Download a Web Font and Store It in the Theme - Lesson

[jonathanbossenger]

IMPORTANT

This lesson plan belongs to part of a greater course, Extend a Low Code Block Theme which depends on the completion of Create a Custom Block Theme #1

Please reach out to @jonathanbossenger (Jonathan Bossenger) in the #training team Slack if you would like to help with this lesson plan.

Topic Description

The goal of this lesson is to learn how to download and store custom fonts in a block theme.

Objectives

After completing this lesson, participants will be able to:

• How to download fonts and where to store them in a theme
• How to convert fonts to a recommended format

Guidelines

Review the [team guidelines] (https://make.wordpress.org/training/handbook/guidelines/)

Review checklist

Reviewers: this is not an extensive list, but it would be helpful if you can keep the following questions in mind while reviewing.

1. Are there any spelling/grammar issues or anything that doesn't make sense?
2. Is the content technically correct?
3. Does the layering of information successfully build from lesson to lesson
4. Can you follow the steps outlined in the course
5. Does the lesson contain enough relevant links to documentation (WordPress documentation, or any other relevant documentation)

[caraya]

Overall feedback and questions:

• If this is a continuation of Create a Block Theme (Low-Code) then it should be made clear in the introduction to this course so we can set the correct expectations
• What knowledge and/or skills should someone who wants to get the most out of this course come with?
• Is this the same audience identified in Course: Create a Block Theme (Low-Code) - Course #1 #631? I would make it clear either way

I think that there is some introductory material missing. Perhaps adding Module 1 of Create a Block Theme (Low-Code) would help make sure we're all starting from the same footing. They can be marked as optional

Even though you've created the course as an extension/continuation of Sarah's course, it appears that you've shifted to a purely technical developer audience. Is this assumption correct?

The items below are more closely related to the course outline

• Since the course appear to rely heavily on editing theme.json? You should make it clear
• Are you providing templates for learners to start working from or a finished product that they can compare their work to if they get stuck? Since we can't rely on this being instructor-led, we have to provide as many ways for learners to work through potential problems as possible
• Are you planning on recommending that the Gutenberg plugin be installed?
• Reviews and introductions may or may not be enough to address audience needs.
  • If you've moved to a purely technical audience then a recap of Create a block theme (low code) may not be enough to address their technical needs

Specific Feedback

Module 1: Recap of Create a Block Theme (Low-Code)

How much of a review is it? How much are you expecting people to know or have retained from previous courses?

Module 2: Saving Site Editor Changes to the Database

Add and export the theme to a file at the end of the title since the module also covers export

Be careful when relying on plugins to complete tasks. Every time a plugin is updated the course needs to be reviewed and changes incorporated. If we only rely on core functionality the changes are less frequent and would be covered under reviews for new versions.

Module 3: Creating Custom Templates and Template Parts

If you include manually building a template from template parts, you may also want to include referencing them from theme.json

custom-templates

templateParts

Module 4: Custom Fonts

There are two different items that fall under this module:

1. Adding Fonts
2. Adding Google Fonts installed locally, which uses a different system and may depend on having Gutenberg installed

Which one will you cover?

Module 5: Theme Patterns

Module 6: Global Styles variations

This use of introduction makes more sense because it is followed by a how to section

Module 7: Internationalization

Patterns are the only low-code way to provide interntionalization but it's not the only way to do it and using the CLI or coding on Javascript or PHP may be better for the audience you're targeting.

[jonathanbossenger]

Hi @caraya, thank you for your feedback.

Given that the course outline is detailed on this ticket, which includes the overall module breakdown, and linked issues for separate lessons, I wonder if I could ask you to add your Overall feedback and questions to the main course ticket, and then separate the module/lesson specific feedback on the relevant lesson tickets.

That way if we discuss questions pertaining to the course overall vs related to specific lessons, the conversation is tracked in the relevant place.

[caraya]

OK

[justintadlock]

@jonathanbossenger - I'm interested in taking this lesson on.

[jonathanbossenger]

Thanks, @justintadlock I appreciate the help.

The general scope for this lesson:

1. How to download a custom font and store it in the right location in the theme directory
2. How to add it to the theme.json file via the settings -> typography section
3. How to apply it to the theme via the Global Styles interface (globally, and on a per block level)
4. How to apply it to the theme manually in theme.json (globally, and on a per block level)

Let me know if you have any questions.

[justintadlock]

@jonathanbossenger - Just providing a quick update.

I've just been following along with your scope, which I think works well. I've wrapped up initial drafts for half of this (bullet points 1 and 2) and expect to have 3 and possibly 4 tomorrow.

I may have missed this, but where do we put the content? On the block theme course repo?

[jonathanbossenger]

Awesome news, thanks @justintadlock.

I may have missed this, but where do we put the content? On the block theme course repo?

I don't mind, you're welcome to add them as PRs to my repo, link to a Google doc here, or whatever is easier for you.

[justintadlock]

@jonathanbossenger Thanks. I've forked the repo and added the initial content for Module 5 here: https://github.com/justintadlock/block-theme-course/tree/main/module-05

[jonathanbossenger]

Awesome, thanks @justintadlock

[courtneyr-dev]

WP 6.1 Fluid Typography WordPress/gutenberg#39529

[justintadlock]

All 4 of the outlined lessons are up on my fork now: https://github.com/justintadlock/block-theme-course/tree/main/module-05

I plan to spend tomorrow cleaning it up. If anyone has any feedback before (or afterward), that'd be great.

[jonathanbossenger]

Thanks, @justintadlock. I'll do my best to give it a quick review later today.

[justintadlock]

I've wrapped up my review and copyediting today. I figured it'd be best to give you a chance to review it before submitting a PR.

Plus, I need to review how to create and submit a PR. It's been a while... 😆

[jonathanbossenger]

Awesome work, thanks, @justintadlock I'll leave my review notes per lesson as comments here.

Lesson 1

Spelling/grammar corrections in italics

Google Fonts is a common place for theme authors, so we will use it throughout this lesson

but a common location is within an /assets/fonts folder

Also, I wonder if we should say "a recommended location", so as to present this as our suggested "best practice"?

[jonathanbossenger]

Lesson 2

"fontFamily": ""Open Sans", sans-serif",

It might be worth adding a note as to why you're using the \ character for escaping the quotes here. The requirement to escape the quotes might be new to some learners.

[jonathanbossenger]

Lesson 3

This is more or a "formalized style guide thing", which we don't have on the training team, and I want to create, but for most of the course lessons I've been using bold to indicate UI elements like clickable items or labels.

We probably should formalize this within the training team, so I wouldn't worry about making any changes here, I can always clean this up when the content is merged.

[justintadlock]

Thanks for the feedback, @jonathanbossenger. That all looks good, and I'll get it incorporated.

I like the use of bold to indicate UI elements. (I'd love to see a standard for that across all of the .ORG style guides. I've mostly used quotes in the past because of the lack of guideline on it.)

[jonathanbossenger]

I'd love to see a standard for that across all of the .ORG style guides. I've mostly used quotes in the past because of the lack of guideline on it.

Hmm now that I think about it, I know the docs team has a style guide, perhaps we should all be following that?

EDIT: It seems that guide also recommends using Bold when explaining UI to interact with - https://make.wordpress.org/docs/style-guide/formatting/procedures/

FWIW the training team also has a Lesson Plan style guide, which could be applied to course lessons

[jonathanbossenger]

Note to self: It might be easier to set the fontFamily to use single quotes inside double-quoted strings.

eg:

"fontFamily": "'Open Sans', sans-serif",

instead of needing to use the \ escape character.

[westnz]

Review:

Clear step-by-step instructions!
The Call-out blocks work well. It helps to highlight important info, but it also succeeds in chunking or grouping content.