add custom web fonts guidance

[bonnieAcameron]

Updating Custom Fonts Guidance

Preview link →

Description

Based on a high number of repeat questions asking for custom (web) fonts, I've created this guidance with review from core devs.

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[bonnieAcameron]

Looks like the failure is in my html

[mejiaj]

@bonnieAcameron I'll take a look.

---

For reference, if you click on the Details of first failed test (test_build) you can see where exactly the error is occurring.

[mejiaj]

@bonnieAcameron pushed up some changes. Guidance should look like this now:

[amyleadem]

@bonnieAcameron I added a few comments with some questions and suggestions.

Please let me know if you have questions!

[amyleadem]

@bonnieAcameron @mejiaj
Created a PR with some possible edits to both the "Customizing family tokens" and "Setting custom fonts" sections: #1937

Some of the changes are just to bring some clarity to the copy, while some are dev fixes because I couldn't get the example code to work.

Feel free to take any, all, or none of the changes. Let me know if you have questions.

[amyleadem]

@bonnieAcameron Looks good to me! (FYI I pushed up a small typo fix in 093d75c)

@mejiaj Can you give a sanity check on the changes made, particularly the new values for $theme-font-role-?

[amyleadem]

Slightly out of scope, but this file name is out of date. We can also link to the file directly for easy reference. Also thinking this note might be better placed at the bottom of the page, below the new "Creating a custom typeface token" section. But now I might be getting out of hand, scope-wise ;)

Suggested change

	**Note:** It is possible to add **custom font metadata**, **custom font stacks**, and **custom font source files** in your USWDS settings. This documentation is coming soon. See the inline documentation in `_uswds-theme-typography` for more details.
	**Note:** It is possible to add **custom font metadata**, **custom font stacks**, and **custom font source files** in your USWDS settings. This documentation is coming soon. See the inline documentation in [_settings-typography.scss](https://github.com/uswds/uswds/blob/develop/packages/uswds-core/src/styles/settings/_settings-typography.scss) for more details.

[amyleadem]

Related, should we create documentation for these? If not, maybe we can remove the coming soon line?

[amyleadem]

@bonnieAcameron I updated this branch and added another couple of comments for your review. Let me know if you have questions or comments!

@mejiaj Can you give a sanity check on the changes made, particularly the new values for $theme-font-role-?

[amyleadem]

Note: This guidance is only one of two options available for adding a custom font. We should add instructions for adding a custom self-hosted font. I can work on writing that and will submit it for review shortly.
@bonnieAcameron

[amyleadem]

@bonnieAcameron @mejiaj
I reformatted the custom fonts section to include instructions for adding a self-hosted font in this PR: #1972

I also added a changelog entry (we'll need to update the merge date here when we have it).

Let me know if you have any questions or want to change up the formatting.