-
diff --git a/docs/components/TheIllustration.vue b/docs/components/TheIllustration.vue
deleted file mode 100644
index 45b5be7a..00000000
--- a/docs/components/TheIllustration.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-
-
-
diff --git a/docs/content/1.get-started/_dir.yml b/docs/content/1.get-started/.navigation.yml
similarity index 100%
rename from docs/content/1.get-started/_dir.yml
rename to docs/content/1.get-started/.navigation.yml
diff --git a/docs/content/1.get-started/1.installation.md b/docs/content/1.get-started/1.installation.md
index c292b96e..d90fd2f8 100644
--- a/docs/content/1.get-started/1.installation.md
+++ b/docs/content/1.get-started/1.installation.md
@@ -8,7 +8,7 @@ description: Get started with Nuxt Fonts right away.
To get started, add `@nuxt/fonts` to your project:
```bash
-npx nuxi@latest module add fonts
+npx nuxt module add fonts
```
## Manual Installation
@@ -63,12 +63,12 @@ div {
That's it! Nuxt Fonts will detect this and you should immediately see the web font loaded in your browser. [Read more about how it works](/advanced#how-it-works).
-::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
-To improve performance, `@nuxt/fonts` by default only loads the normal/400 font-weight. See the [configuration docs](/get-started/configuration#styles) on how to change this default.
+::warning{to="/get-started/configuration#styles"}
+To improve performance, `@nuxt/fonts` by default only loads the normal/400 font-weight. See the *configuration docs* on how to change this default.
::
-::callout
-Check out the [configuration docs](/get-started/configuration) for all available options and features to customize.
+::note{to="/get-started/configuration"}
+Check out the *configuration docs* for all available options and features to customize.
::
## Troubleshooting
@@ -96,7 +96,7 @@ If an error occurs during installation:
- Try recreating your lock-file:
```bash
- npx nuxt@latest upgrade --force
+ npx nuxt upgrade --force
```
- Check your network connection. Your machine might be having a hard time communicating with the font providers.
diff --git a/docs/content/1.get-started/2.configuration.md b/docs/content/1.get-started/2.configuration.md
index 7c2dc3d0..30c1603e 100644
--- a/docs/content/1.get-started/2.configuration.md
+++ b/docs/content/1.get-started/2.configuration.md
@@ -47,10 +47,14 @@ export default defineNuxtConfig({
#### `weights`
-Default: `[400]`
+Default: `['400 700']`
Defines the font-weights that should be downloaded for a font.
+::tip
+To specify a variable font weight, define the range as you would in plain CSS (eg. `100 900`).
+::
+
#### `styles`
Default: `['normal', 'italic']`
@@ -248,7 +252,7 @@ export default defineNuxtConfig({
})
```
-::callout
+::tip
If you previously set `processCSSVariables` to `true` for Tailwind v4 support, it is no longer needed or recommended in v0.11.0 and later.
::
diff --git a/docs/content/1.get-started/3.usage.md b/docs/content/1.get-started/3.usage.md
index c3eaeeec..dee49586 100644
--- a/docs/content/1.get-started/3.usage.md
+++ b/docs/content/1.get-started/3.usage.md
@@ -12,10 +12,14 @@ div {
}
```
-::callout
+::note
Note that Nuxt Fonts will only generate CSS for the first font in a `font-family` declaration. Subsequent fonts in the list will be used to generate metrics for font fallbacks.
::
+::warning
+Inline styles with `font-family` within your `` do currently not work; it only processes CSS stylesheets.
+::
+
## Tailwind CSS
### v3 and below
@@ -33,8 +37,8 @@ export default {
}
```
-::callout
-If the font name contains an invalid identifier (like a space character), you'll need to wrap it in quotes or escape the character manually. Read more [here](https://tailwindcss.com/docs/font-family#customizing-your-theme).
+::tip{to="https://v3.tailwindcss.com/docs/font-family#customizing-your-theme"}
+If the font name contains an invalid identifier (like a space character), you'll need to wrap it in quotes or escape the character manually.
::
### v4
@@ -47,7 +51,7 @@ TailwindCSS v4 brings a [brand new way](https://tailwindcss.com/blog/tailwindcss
}
```
-::callout
+::tip
If you previously set `processCSSVariables` to `true` for Tailwind v4 support, it is no longer needed or recommended for v0.11.0 and above.
::
@@ -65,3 +69,10 @@ export default defineConfig({
},
})
```
+
+If you're using the Wind4 (Tailwind4) preset, set `font` instead of `fontFamily`.
+```js
+ font: {
+ inter: 'Inter',
+ },
+```
diff --git a/docs/content/1.get-started/4.providers.md b/docs/content/1.get-started/4.providers.md
index de8112be..95898c0c 100644
--- a/docs/content/1.get-started/4.providers.md
+++ b/docs/content/1.get-started/4.providers.md
@@ -13,8 +13,8 @@ The local provider deeply scans your `public/` directories (including of your la
Then, when you use a `font-family` in your CSS, we check to see whether it matches one of these files. By default, we expect the font file to be the `400` weight, `normal` style, and `latin` subset. To indicate different weights and styles, please include that information in the filename. For example `comic-sans-ms.woff2` (400/normal/latin; defaults), `comic-sans-ms-700-italic-cyrillic.woff2` (700/italic/cyrillic). Keywords like `light`, `bold`, or `black` are accepted in place of a weight number: `comic-sans-ms-bold.woff2`. `font-family` values with spaces and/or caps will lookup hyphenated lowercase filenames as well, eg `font-family: 'Comic Sans MS'` will look for `comic-sans-ms.woff2` as well as `Comic\ Sans\ MS.woff2` on disk.
-::callout{type=warning}
-Please note that the local provider will only attempt to load styles and weights that were configured in the [Font Options](./2.configuration.md#font-options).
+::warning{to="/get-started/configuration#font-options"}
+Please note that the local provider will only attempt to load styles and weights that were configured in the *Font Options*.
::
### `google`
@@ -33,8 +33,8 @@ Please note that the local provider will only attempt to load styles and weights
[Fontshare](https://www.fontshare.com/) is a free font service with 100+ professional-grade fonts from the Indian Type Foundry (ITF).
-::callout
-You should read [their terms in full](https://www.fontshare.com/licenses/itf-ffl) before using a font through `fontshare`.
+::warning{to="https://www.fontshare.com/licenses/itf-ffl"}
+You should read their terms in full before using a font through `fontshare`.
::
### `fontsource`
@@ -58,12 +58,12 @@ export default defineNuxtConfig({
})
```
-::callout{type=warning}
+::warning
We currently can't provide non-latin subsets for Adobe Fonts as they do not have a public API for that. Please use other providers in such cases.
::
-::callout{type=warning}
-You should read [their terms in full](https://www.adobe.com/legal/terms.html) before using a font through `adobe`.
+::warning{to="https://www.adobe.com/legal/terms.html"}
+You should read their terms in full before using a font through `adobe`.
::
## Custom Providers
diff --git a/docs/content/3.contributing.md b/docs/content/3.contributing.md
index acbad8cd..ad6e7297 100644
--- a/docs/content/3.contributing.md
+++ b/docs/content/3.contributing.md
@@ -3,7 +3,7 @@ title: Contributing
description: We can never thank you enough for your contributions.
---
-::callout
+::warning
It is highly recommended to read [the Nuxt contribution guide](https://nuxt.com/docs/community/contribution) before making any contributions.
::
diff --git a/docs/content/index.md b/docs/content/index.md
new file mode 100644
index 00000000..eaa54c5d
--- /dev/null
+++ b/docs/content/index.md
@@ -0,0 +1,135 @@
+---
+seo:
+ title: Optimized Custom Web Fonts for your Nuxt Apps
+ description: Plug-and-play custom web font optimization and configuration for Nuxt apps. Use and optimize your fonts using your favorite font source.
+---
+
+::hero-background{class="absolute w-full top-[var(--ui-header-height)] transition-all text-primary flex-shrink-0"}
+::
+
+::u-page-hero
+#default
+:::fonts-videos
+:::
+
+#title
+Custom Web Fonts for [Nuxt Applications]{class="text-primary-400"}
+
+#description
+Plug-and-play fonts optimization for Nuxt apps. Use and optimize your fonts using your favorite font source.
+
+#links
+ :::u-button
+ ---
+ size: xl
+ to: /get-started/installation
+ icon: i-lucide-rocket
+ ---
+ Get started
+ :::
+
+ :::copy-code-input{source="npx nuxt module add fonts"}
+ :::
+::
+
+::u-page-section
+#title
+Get the most of your fonts with [dynamic features]{class="text-primary-400"}
+
+#features
+ :::u-page-card
+ ---
+ icon: i-ph-sparkle-fill
+ to: /get-started/configuration
+ spotlight: true
+ ---
+ #title
+ Zero Configuration Required
+
+ #description
+ One single `font-family:` declaration, let us manage the rest.
+ :::
+
+ :::u-page-card
+ ---
+ icon: i-ph-plug-fill
+ to: /get-started/providers
+ spotlight: true
+ ---
+ #title
+ 6 Providers Supported
+
+ #description
+ Choose over 6 font providers to download your fonts, no vendor lock-in.
+ :::
+
+ :::u-page-card
+ ---
+ icon: i-ph-user-circle-fill
+ to: /get-started/providers
+ spotlight: true
+ ---
+ #title
+ Custom Providers for Full Control
+
+ #description
+ Get full control over what you need. You can create custom providers by yourself.
+ :::
+
+ :::u-page-card
+ ---
+ icon: i-ph-download-fill
+ to: /advanced#how-it-works
+ spotlight: true
+ ---
+ #title
+ Local Download Support
+
+ #description
+ Font files are automatically downloaded for production usage. No other requests to your providers.
+ :::
+
+ :::u-page-card
+ ---
+ icon: i-ph-magic-wand-fill
+ to: /advanced#how-it-works
+ spotlight: true
+ ---
+ #title
+ Automatic Font Metric Optimisation
+
+ #description
+ Unlock the power of our built-in font optimizer with fontaine and capsize.
+ :::
+
+ :::u-page-card
+ ---
+ icon: i-ph-rocket-launch-fill
+ to: /get-started/installation
+ spotlight: true
+ ---
+ #title
+ Automatic Font Caching
+
+ #description
+ Build/Dev time font caching powered by unstorage.
+ :::
+::
+
+::u-page-section
+#title
+Choose your [favorite provider]{class="text-primary-400"}
+
+#description
+Providers are integrations between Nuxt Fonts and third-party font sources. Each provider is responsible for downloading and caching fonts from different sources. You can use any one of the built-in providers, or write your own.
+
+#links
+ :::u-button
+ ---
+ size: xl
+ to: /get-started/installation
+ icon: i-lucide-rocket
+ ---
+ Get started
+ :::
+::
diff --git a/docs/error.vue b/docs/error.vue
deleted file mode 100644
index fd06195a..00000000
--- a/docs/error.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-
-
-
-
-
-
- Custom Web Fonts for Nuxt Applications
-
-
- Plug-and-play fonts optimization for Nuxt apps. Use and optimize your fonts using your favorite font source.
-
-
-
- Get started
-
-
-
-
-
-
-
-
-
-
-
-
-
- Get the most of your fonts with dynamic features
-
-
-
-
- One single font-family: declaration, let us manage the rest.
-
-
-
-
-
-
-
-
-
-
-
- Choose your favorite provider
-
-
- Providers are integrations between Nuxt Fonts and third-party font sources. Each provider is
- responsible for downloading and caching fonts from different sources. You can use any one of the built-in providers, or write your own.
-
-
-
- Get Started
-
-
-
-