From 12d0e8f7577ed1a4f12d548b1a4669d7dcc81210 Mon Sep 17 00:00:00 2001 From: Kate Scherz Date: Fri, 12 Dec 2025 12:52:27 +1300 Subject: [PATCH 1/5] Add documentation for adding correct fonts --- packages/demo/src/components/sidebar.astro | 1 + .../demo/src/pages/getting-started/fonts.mdx | 57 +++++++++++++++++++ packages/ui/src/theme/theme-base.css | 3 +- 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 packages/demo/src/pages/getting-started/fonts.mdx diff --git a/packages/demo/src/components/sidebar.astro b/packages/demo/src/components/sidebar.astro index 4632df79..6b72ddf9 100644 --- a/packages/demo/src/components/sidebar.astro +++ b/packages/demo/src/components/sidebar.astro @@ -11,6 +11,7 @@ const gettingStartedLinks = [ { text: "Installation", href: "/getting-started/installation" }, { text: "Usage", href: "/getting-started/usage" }, { text: "Themes", href: "/getting-started/themes" }, + { text: "Fonts", href: "/getting-started/fonts" }, { text: "Customizing", href: "/getting-started/customizing" }, { text: "Component Architecture", diff --git a/packages/demo/src/pages/getting-started/fonts.mdx b/packages/demo/src/pages/getting-started/fonts.mdx new file mode 100644 index 00000000..627f35eb --- /dev/null +++ b/packages/demo/src/pages/getting-started/fonts.mdx @@ -0,0 +1,57 @@ +--- +layout: "@demo/layouts/mdx-layout.astro" +heading: "Fonts" +--- + +## Font Files + +There is one font used throughout the Equality theme. This is either TWK Lausanne or Inter. You only need to install one or the other. + +### Primary: TWK Lausanne + +The official font of EQTY Lab is TWK Lausanne. + +For use on Equality projects, we have a private npm package for this font: + +```bash +npm install @eqtylab/equality-fonts +#or +pnpm add @eqtylab/equality-fonts +# or +yarn add @eqtylab/equality-fonts +# or +bun add @eqtylab/equality-fonts +``` + +For use on other projects, you can [purchase this font](https://weltkern.com/typefaces/lausanne) and install it yourself. + +### Fallback: Inter + +The fallback font is Inter. This is a free font and can be installed or downloaded from [Google Fonts](https://fonts.google.com/specimen/Inter). + +## Usage + +Import the font files into your project either using `@font-face` or your framework's recommended method. + +```css +@font-face { + font-family: "TWK Lausanne"; + src: (...); + font-weight: 400; + font-style: normal; +} +``` + +The minimum required font-weights are `400` and `600`. + +The minimum required font-style is `normal`. + +If the imported font-family name is `TWK Lausanne` or `Inter`, you are done. + +If the imported font-family name is different or inside a CSS variable, you will need to update the CSS primary font variable accordingly: + +```css +@theme inline { + --font-primary: var(--twk-lausanne); /* Replace with your font-family name */ +} +``` diff --git a/packages/ui/src/theme/theme-base.css b/packages/ui/src/theme/theme-base.css index d51555f3..7c42c949 100644 --- a/packages/ui/src/theme/theme-base.css +++ b/packages/ui/src/theme/theme-base.css @@ -5,7 +5,8 @@ @theme inline { /* FONT FAMILY */ - --font-sans: 'TWK Lausanne', 'Inter', sans-serif; + --font-primary: 'TWK Lausanne', 'Inter'; + --font-sans: var(--font-primary), sans-serif; /* FONT SIZE */ --text-xxs: 0.625rem; From b1ed89ff926c260d5d48252d19c0ff78fb384827 Mon Sep 17 00:00:00 2001 From: Kate Scherz Date: Mon, 15 Dec 2025 16:39:53 +1300 Subject: [PATCH 2/5] feat: Add font documentation --- .../demo/src/pages/getting-started/fonts.mdx | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/demo/src/pages/getting-started/fonts.mdx b/packages/demo/src/pages/getting-started/fonts.mdx index 627f35eb..7c6fcb6e 100644 --- a/packages/demo/src/pages/getting-started/fonts.mdx +++ b/packages/demo/src/pages/getting-started/fonts.mdx @@ -27,7 +27,7 @@ For use on other projects, you can [purchase this font](https://weltkern.com/typ ### Fallback: Inter -The fallback font is Inter. This is a free font and can be installed or downloaded from [Google Fonts](https://fonts.google.com/specimen/Inter). +The fallback font is Inter. Use this if you don't have access to TWK Lausanne. This is a free font and can be installed or downloaded from [Google Fonts](https://fonts.google.com/specimen/Inter). ## Usage @@ -48,10 +48,28 @@ The minimum required font-style is `normal`. If the imported font-family name is `TWK Lausanne` or `Inter`, you are done. -If the imported font-family name is different or inside a CSS variable, you will need to update the CSS primary font variable accordingly: +### Changing the font family name + +If the imported font-family name is different or inside a CSS variable, you will need to update the CSS primary font variable. + +#### Tailwind v4 ```css +/* Tailwind v4 */ @theme inline { --font-primary: var(--twk-lausanne); /* Replace with your font-family name */ } ``` + +#### Other CSS frameworks + +```tsx +/* Other CSS frameworks */ + + + +``` From 243c14dc2c15585c339b4d2a17957d4ea99234db Mon Sep 17 00:00:00 2001 From: Kate Scherz Date: Tue, 16 Dec 2025 08:34:16 +1300 Subject: [PATCH 3/5] Update package name and add package link --- packages/demo/src/pages/getting-started/fonts.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/demo/src/pages/getting-started/fonts.mdx b/packages/demo/src/pages/getting-started/fonts.mdx index 7c6fcb6e..45489f92 100644 --- a/packages/demo/src/pages/getting-started/fonts.mdx +++ b/packages/demo/src/pages/getting-started/fonts.mdx @@ -11,16 +11,16 @@ There is one font used throughout the Equality theme. This is either TWK Lausann The official font of EQTY Lab is TWK Lausanne. -For use on Equality projects, we have a private npm package for this font: +For use on Equality projects, we have a [private npm package](https://github.com/eqtylab/fonts) for this font: ```bash -npm install @eqtylab/equality-fonts +npm install @eqtylab/fonts #or -pnpm add @eqtylab/equality-fonts +pnpm add @eqtylab/fonts # or -yarn add @eqtylab/equality-fonts +yarn add @eqtylab/fonts # or -bun add @eqtylab/equality-fonts +bun add @eqtylab/fonts ``` For use on other projects, you can [purchase this font](https://weltkern.com/typefaces/lausanne) and install it yourself. From 3306bacdadb965cadf52f35ca8b68880ce6af683 Mon Sep 17 00:00:00 2001 From: Kate Scherz Date: Tue, 16 Dec 2025 08:54:02 +1300 Subject: [PATCH 4/5] Add some more docs on importing from EQTY Lab fonts or Google fonts --- packages/demo/src/pages/getting-started/fonts.mdx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/demo/src/pages/getting-started/fonts.mdx b/packages/demo/src/pages/getting-started/fonts.mdx index 45489f92..837f0559 100644 --- a/packages/demo/src/pages/getting-started/fonts.mdx +++ b/packages/demo/src/pages/getting-started/fonts.mdx @@ -31,7 +31,19 @@ The fallback font is Inter. Use this if you don't have access to TWK Lausanne. T ## Usage -Import the font files into your project either using `@font-face` or your framework's recommended method. +If using the EQTY Lab fonts package for TWK Lausanne, you can import using: + +```css +@import "@eqtylab/fonts/css/twk-lausanne/index.css"; +``` + +If using Inter from Google Fonts, you can import with: + +```css +@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); +``` + +If using local files, import the font files into your project either using `@font-face` or your framework's recommended method: ```css @font-face { From c30e6da8d86d267505d50b3d25b8235778578208 Mon Sep 17 00:00:00 2001 From: Kate Scherz Date: Tue, 16 Dec 2025 09:58:30 +1300 Subject: [PATCH 5/5] Add further documentation regarding fonts --- packages/demo/src/pages/getting-started/usage.mdx | 10 ++++++++++ packages/demo/src/pages/index.mdx | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/demo/src/pages/getting-started/usage.mdx b/packages/demo/src/pages/getting-started/usage.mdx index 8f561d16..6dc35025 100644 --- a/packages/demo/src/pages/getting-started/usage.mdx +++ b/packages/demo/src/pages/getting-started/usage.mdx @@ -29,6 +29,16 @@ import { ThemeProvider } from "@eqtylab/equality"; ; ``` +## Setting up the fonts + +Import the EQTY Lab fonts into your global stylesheet: + +```css +@import "@eqtylab/fonts/css/twk-lausanne/index.css"; +``` + +For further information and alternatives, see the [Fonts](/getting-started/fonts) page. + ## Use components Each component includes its own scoped `.module.css` file — no need to import a global stylesheet. diff --git a/packages/demo/src/pages/index.mdx b/packages/demo/src/pages/index.mdx index cf6d4227..319d3b35 100644 --- a/packages/demo/src/pages/index.mdx +++ b/packages/demo/src/pages/index.mdx @@ -43,12 +43,13 @@ Then head to the [Installation](/getting-started/installation) page to configure - [Installation](/getting-started/installation) — setup and authentication - [Usage](/getting-started/usage) — theming your app and using components - [Themes](/getting-started/themes) — light/dark system +- [Fonts](/getting-started/fonts) — adding font files to your project - [Customization](/getting-started/customizing) — overrides and brand tokens - [Component Architecture](/getting-started/component-architecture) — how everything works internally ## For developers -Equality UI is framework-agnostic — it works seamlessly in **Vite**, **Next.js**, and **Astro** environments. Just wrap your app with the `` and import the components you need — everything else is automatic. +Equality UI is framework-agnostic — it works seamlessly in **Vite**, **Next.js**, and **Astro** environments. Just add the theme config and fonts and then import the components you need — everything else is automatic. ## About and Purpose