feat: add webfont with global CSS and preloading

This commit is contained in:
Stefan Imhoff
2023-02-20 16:37:28 +01:00
parent e851ef9b49
commit 1fd04866b5
7 changed files with 33 additions and 0 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -17,6 +17,21 @@ const { title } = Astro.props;
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<link
rel="preload"
href="/assets/fonts/secuela-regular-vf.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/assets/fonts/secuela-italic-vf.woff2"
as="font"
type="font/woff2"
crossorigin
/>
</head>
<body class="flex h-screen flex-col font-sans font-normal leading-relaxed">
<slot />

17
src/styles/fonts.css Normal file
View File

@@ -0,0 +1,17 @@
@font-face {
font-display: swap;
font-family: 'SecuelaVariable';
font-style: normal;
font-weight: 1 999;
src: url('/assets/fonts/secuela-regular-vf.woff2') format('woff2'),
url('/assets/fonts/secuela-regular-vf.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'SecuelaVariable';
font-style: italic;
font-weight: 1 999;
src: url('/assets/fonts/secuela-italic-vf.woff2') format('woff2'),
url('/assets/fonts/secuela-italic-vf.woff') format('woff');
}

1
src/styles/global.css Normal file
View File

@@ -0,0 +1 @@
@import 'fonts.css';