Using custom fonts
Looking to add some custom typefaces to an Astro website? Use Google Fonts with Fontsource or add a font of your choice.
v6.docs.astro.build • Docs 
src\styles\global.css
字体家族加入了MiSans-VF
html {
max-width: 70ch;
padding: 6rem 1rem;
margin: auto;
background-color: var(--bg);
color: var(--tx);
font-family:
MiSans-VF,
-apple-system,
system-ui,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scrollbar-gutter: stable;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
}
}
src\components\Head.astro
引入了字体css
<!-- font -->
<link rel="preconnect" href="https://unpkg.com" />
<link
rel="stylesheet"
href="https://unpkg.com/subsetted-fonts@latest/MiSans-VF/MiSans-VF.css"
/>