diff --git a/examples/next-advanced/src/pages/_app.tsx b/examples/next-advanced/src/pages/_app.tsx
index ee460cfaff..0204439fac 100644
--- a/examples/next-advanced/src/pages/_app.tsx
+++ b/examples/next-advanced/src/pages/_app.tsx
@@ -6,6 +6,7 @@ import Footer from '../components/Footer'
 import GlobalStyle from '../components/GlobalStyle'
 import Head from '../components/Head'
 import Header from '../components/Header'
+import '@ultraviolet/fonts/fonts.css'
 
 type Themes = 'light' | 'dark'
 
diff --git a/examples/next-advanced/src/pages/_document.tsx b/examples/next-advanced/src/pages/_document.tsx
index 9d110914c9..11ac597ff4 100644
--- a/examples/next-advanced/src/pages/_document.tsx
+++ b/examples/next-advanced/src/pages/_document.tsx
@@ -34,10 +34,6 @@ class MyDocument extends Document {
             name="twitter:image"
             content="https://ultraviolet.scaleway.com/social.png"
           />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Asap:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
           <link
             rel="icon"
             type="image/svg+xml"
diff --git a/examples/next-login/src/pages/_app.tsx b/examples/next-login/src/pages/_app.tsx
index c0244b2538..40ce309654 100644
--- a/examples/next-login/src/pages/_app.tsx
+++ b/examples/next-login/src/pages/_app.tsx
@@ -3,6 +3,7 @@ import { Button } from '@ultraviolet/ui'
 import { darkTheme, normalize, theme } from '@ultraviolet/ui'
 import type { AppProps } from 'next/app'
 import { useState } from 'react'
+import '@ultraviolet/fonts/fonts.css'
 
 const globalStyles = (mode: 'light' | 'dark') => () =>
   css`
diff --git a/examples/next-login/src/pages/_document.tsx b/examples/next-login/src/pages/_document.tsx
index 9d110914c9..11ac597ff4 100644
--- a/examples/next-login/src/pages/_document.tsx
+++ b/examples/next-login/src/pages/_document.tsx
@@ -34,10 +34,6 @@ class MyDocument extends Document {
             name="twitter:image"
             content="https://ultraviolet.scaleway.com/social.png"
           />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Asap:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
           <link
             rel="icon"
             type="image/svg+xml"
diff --git a/examples/next-simple/src/pages/_app.tsx b/examples/next-simple/src/pages/_app.tsx
index 3e588c90b8..4973e2c06d 100644
--- a/examples/next-simple/src/pages/_app.tsx
+++ b/examples/next-simple/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { ThemeProvider } from '@emotion/react'
 import { theme } from '@ultraviolet/ui'
 import type { AppProps } from 'next/app'
+import '@ultraviolet/fonts/fonts.css'
 
 const App = ({ Component, pageProps }: AppProps) => (
   <ThemeProvider theme={theme}>
diff --git a/examples/next-simple/src/pages/_document.tsx b/examples/next-simple/src/pages/_document.tsx
index 9d110914c9..11ac597ff4 100644
--- a/examples/next-simple/src/pages/_document.tsx
+++ b/examples/next-simple/src/pages/_document.tsx
@@ -34,10 +34,6 @@ class MyDocument extends Document {
             name="twitter:image"
             content="https://ultraviolet.scaleway.com/social.png"
           />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Asap:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
           <link
             rel="icon"
             type="image/svg+xml"
diff --git a/packages/fonts/package.json b/packages/fonts/package.json
index 500cb6c2b2..e2799eee39 100644
--- a/packages/fonts/package.json
+++ b/packages/fonts/package.json
@@ -34,7 +34,16 @@
   ],
   "type": "module",
   "exports": {
-    ".": { "style": "./dist/fonts.css" },
-    "./fonts.css": "./dist/fonts.css"
+    ".": {
+      "require": "./dist/fonts.css",
+      "import": "./dist/fonts.css",
+      "default": "./dist/fonts.css",
+      "style": "./dist/fonts.css"
+    },
+    "./fonts.css": {
+      "require": "./dist/fonts.css",
+      "import": "./dist/fonts.css",
+      "default": "./dist/fonts.css"
+    }
   }
 }