{"id":25440558,"url":"https://github.com/pglevy/uswds-custom-theme-typefaces","last_synced_at":"2025-11-01T11:30:26.234Z","repository":{"id":63154258,"uuid":"537895262","full_name":"pglevy/uswds-custom-theme-typefaces","owner":"pglevy","description":"Extend the default font options for the U.S. Web Design System by adding theme settings and font files for more typefaces from Google Fonts","archived":false,"fork":false,"pushed_at":"2024-02-15T02:58:33.000Z","size":29767,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-02-15T03:34:52.394Z","etag":null,"topics":["design","design-system","google-fonts","hacktoberfest","hacktoberfest2022","sass","scss","sketch","theme","typography","uswds"],"latest_commit_sha":null,"homepage":"https://pglevy.github.io/uswds-custom-theme-typefaces/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pglevy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-09-17T18:21:41.000Z","updated_at":"2023-04-21T11:13:59.000Z","dependencies_parsed_at":"2023-10-11T04:48:29.703Z","dependency_job_id":null,"html_url":"https://github.com/pglevy/uswds-custom-theme-typefaces","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"pglevy/uswds-clean-install","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fuswds-custom-theme-typefaces","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fuswds-custom-theme-typefaces/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fuswds-custom-theme-typefaces/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fuswds-custom-theme-typefaces/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pglevy","download_url":"https://codeload.github.com/pglevy/uswds-custom-theme-typefaces/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239286023,"owners_count":19613678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","design-system","google-fonts","hacktoberfest","hacktoberfest2022","sass","scss","sketch","theme","typography","uswds"],"created_at":"2025-02-17T11:37:38.624Z","updated_at":"2025-11-01T11:30:26.171Z","avatar_url":"https://github.com/pglevy.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# USWDS Custom Theme Typefaces\n\nThe purpose of this project is to provide theme settings and related files to make it easier to incorporate some of the best [Google Fonts](https://fonts.google.com/) typefaces into your [U.S. Web Design System](https://designsystem.digital.gov/) sites and expand the typographic diversity of the gov site ecosystem\n\n## Check it out\n\n1. [Open uswds-custom-theme-typefaces in Gitpod](https://gitpod.io/#https://github.com/pglevy/uswds-custom-theme-typefaces) to run the project.\n\n1. Uncomment one of these @forward statements in `assets/uswds/dist/theme/styles.scss` and refresh the preview site to see the site with that typeface.\n\n```\n// @forward \"typeface-libre-baskerville\";\n// @forward \"typeface-lora\";\n// @forward \"typeface-poppins\";\n@forward \"uswds\";\n@forward \"uswds-theme-custom-styles\";\n```\n\nYou can also view the type specimen page, which is currently the [homepage for the compiled site](https://pglevy.github.io/uswds-custom-theme-typefaces/) hosted here on GitHub Pages.\n\n## How to add to your project\n\n### 1. Copy settings tokens\n\nIf you're already using theme settings (in a `_uswds-theme.scss` file, for example), copy the token settings content from one of the typeface files (for example: `assets/uswds/dist/theme/_typeface-lora.scss`). Be sure to leave out the `@use \"uswds-core\" with` because it's already in your theme file.\n\nIf you're not using other theme settings, you can alternatively add one of these @forward statements to your `styles.scss` file (or whatever your main sass file is).\n\n```\n// @forward \"typeface-libre-baskerville\";\n// @forward \"typeface-lora\";\n// @forward \"typeface-poppins\";\n@forward \"uswds-theme\";\n@forward \"uswds\";\n@forward \"uswds-theme-custom-styles\";\n```\n\n### 2. Copy font files\n\nCopy the files for the typefaces you want to use from `assets/uswds/dist/fonts/custom`. If you put them in a different place in your project, update the `dir` setting in the `$theme-font-serif-custom-src` token.\n\n## Typefaces\n\nIncluded:\n\n- Bitter\n- Inter\n- Lato\n- Libre Baskerville\n- Lora\n- Noto Sans\n- Noto Serif\n- Playfair Display\n- Poppins\n- Work Sans\n\n## Helpful Tools\n\n- [google-webfonts-helper](https://google-webfonts-helper.herokuapp.com/fonts)\n- [System Font Stack](https://systemfontstack.com/)\n- [FontDrop!](https://fontdrop.info/)\n- [otf2ttf](https://github.com/awesometoolbox/otf2ttf)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglevy%2Fuswds-custom-theme-typefaces","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpglevy%2Fuswds-custom-theme-typefaces","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglevy%2Fuswds-custom-theme-typefaces/lists"}