Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -1,3 +1,44 @@
This repository contains material under two separate licenses: (1) a Monotype
license that applies only to the subset font file identified below, and (2)
the MIT License, which applies to all other sample code in this repository.

---

1. Subset font file — Monotype license

The subset font file in examples/consumer-app/public/fonts/ in the
pattern-react-webfonts repository (the "Font Software") is licensed under the
following terms:

Monotype Imaging Inc. ("Monotype") grants you a non-exclusive, non-assignable,
non-transferable license to:

- install the Font Software on a user's workstation(s);
- install the Font Software on a server on which the Font Software may solely be
accessed in connection with testing the pattern-react-webfonts repository
provided by Monotype;
- Use the Font Software on such workstation(s) or via such server to generate
content on the user's website for testing purposes only

You may not:

- Use the Font Software as webfont on websites
- Transfer, rent, lease, sublicense, give, lend, or further distribute the Font
Software, or any copy thereof
- Modify the Font Software in any way, including to create, directly or
indirectly, derivative works from the Font Software or any portion thereof
- Embed the Font Software in open source software which may have the direct or
indirect effect of causing the Font Software to become Publicly Available
Software or otherwise be subject to a Publicly Available Software agreement

---

2. Sample code — MIT License

Sample code with the exception of the subset font file in
examples/consumer-app/public/fonts/ in the pattern-react-webfonts repository is
licensed under the MIT License.

MIT License

Copyright (c) 2026 Monotype Imaging Inc.
Expand Down
19 changes: 10 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ This pattern implements the following assertions from [reference-fonts-implement
- `lc-006` — using a font differs from distributing a font
- `pc-008` — self-hosting web fonts requires a web font license; desktop licenses do not permit web delivery
- `bd-001` — self-hosted fonts integrate into CI/CD pipelines as versioned static assets
- `pc-010` — cross-origin font delivery requires CORS configuration
- `pc-010` — cross-origin font delivery requires CORS configuration; missing headers cause silent font blocking
- `pc-012` — some Monotype web font licenses require a tracking script alongside self-hosted font files; this pattern covers `@font-face` / asset delivery only—add a script to the consumer app (for example in `index.html` or via your framework) when your license mandates tracking. For privacy-related scope, see the **Clarification** on [pc-012](https://github.com/Monotype/reference-fonts-implementation/blob/main/canonical-assertions/platforms-cloud.md#some-monotype-web-font-licenses-require-a-tracking-script-alongside-self-hosted-font-files).

In the consumer example, `@font-face` points at **`/fonts/...` on the same origin** as the Vite app, so you typically do not hit cross-origin `@font-face` blocking. **`pc-010` still applies** if you move font files to another origin (for example a CDN): that host must send correct `Access-Control-Allow-Origin` (and related) headers on font responses.

Expand All @@ -33,10 +34,6 @@ In the consumer example, `@font-face` points at **`/fonts/...` on the same origi

## Usage

1. Obtain font files under a valid Monotype web font license (this repo ships a **small subset** for build/CI; use your own files in forks or production)
2. Place `.woff2` files in `examples/consumer-app/public/fonts/` and update the `src` path in `examples/consumer-app/fonts.css` (`@font-face`) to match. Additional font names remain **gitignored** unless you force-add (`git add -f`) or add a `!` exception in `.gitignore`
3. Install and run:

### Build the library

```bash
Expand All @@ -52,13 +49,17 @@ npm install
npm run dev
```

This repository includes a committed **`package-lock.json`**. After cloning, use **`npm ci`** when you want installs to match CI and the lockfile exactly; use **`npm install`** when you intentionally add or upgrade dependencies (then commit the updated lockfile).
Before running, place a `.woff2` font file in `examples/consumer-app/public/fonts/` and update the URL in `examples/consumer-app/fonts.css` to match. Font files are gitignored by default — supply your own under a valid Monotype web font license.

This repository includes committed **`package-lock.json`** files at the **root** and under **`examples/consumer-app/`**. After cloning, use **`npm ci`** in each directory when you want installs to match CI and the lockfiles exactly; use **`npm install`** when you intentionally change dependencies (then commit the updated lockfile(s)).

To verify the consumer app builds like CI: `cd examples/consumer-app && npm ci && npm run build`.

## Font files

This repository includes **`examples/consumer-app/public/fonts/MyFont.woff2`**, a heavily subsetted version of Gotham Regular, so **`npm run build`** and **GitHub Actions** work out of the box. It demonstrates self-hosting only; **redistribution rights for that file are not granted to you**—use fonts you are licensed to deploy. For your own project, replace the file and the `src:` path in `examples/consumer-app/fonts.css`. See `examples/consumer-app/public/fonts/placeholder.txt` for placement notes.
Font files are **gitignored** by default. You may supply your own under a valid Monotype web font license, or force-add a small subset for CI (see below). When a subset `.woff2` is present in `examples/consumer-app/public/fonts/`, it is subject to the Monotype limited-testing terms in **LICENSE**, not general web use or redistribution—see **License** at the end of this README. See `examples/consumer-app/public/fonts/placeholder.txt` for placement instructions.

To commit a different binary despite `*.woff2` in `.gitignore`, use **`git add -f examples/consumer-app/public/fonts/YourFile.woff2`** once, or add a **`!examples/consumer-app/public/fonts/YourFile.woff2`** line after the `*.woff2` rule.
**Subset font in-repo (for CI):** To commit a small, licensed subset `.woff2` so `vite build` has a real file at the path referenced in `fonts.css`, use once: `git add -f examples/consumer-app/public/fonts/MyFont.woff2` (adjust the filename to match `fonts.css`). After that, the file stays tracked like any other source file.

## Requirements

Expand All @@ -79,4 +80,4 @@ Use GitHub Discussions (Q&A category) for questions about this pattern.

## License

Sample application **code** in this repository is licensed under the [MIT License](LICENSE). The **subset font file** in `examples/consumer-app/public/fonts/` is included **only** as a build/CI demonstration asset; it is **not** licensed to third parties for separate redistribution—use fonts you have rights to ship. Canonical assertion text in [reference-fonts-implementation](https://github.com/Monotype/reference-fonts-implementation) remains subject to that repository’s terms.
Sample application code in this repository is licensed under the MIT License. The subset font file in examples/consumer-app/public/fonts/ is included only as a build/CI demonstration asset and licensed for limited testing purposes only; it is not licensed for regular use on websites or redistribution. Please refer to the LICENSE file in the repository for both licenses. Canonical assertion text in [reference-fonts-implementation](https://github.com/Monotype/reference-fonts-implementation) remains subject to that repository’s terms.
3 changes: 3 additions & 0 deletions examples/consumer-app/main.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import { createRoot } from "react-dom/client";
import App from "./App";
import "./fonts.css";

// fonts.css covers @font-face delivery only. If your license requires a tracking script
// (pc-012 in reference-fonts-implementation), add it here or in index.html—this sample does not.

const root = document.getElementById("root");
createRoot(root).render(
<React.StrictMode>
Expand Down