fix font loading

This commit is contained in:
Timothy
2021-01-10 14:31:38 +08:00
parent 5c1b4943ad
commit 11776b2e29
5 changed files with 64 additions and 67 deletions

View File

@ -6,7 +6,6 @@ import { DefaultSeo } from 'next-seo'
import Head from 'next/head'
import SEO from '@/components/SEO'
import LayoutWrapper from '@/components/LayoutWrapper'
import MDXComponents from '@/components/MDXComponents'
export default function App({ Component, pageProps }) {
@ -18,19 +17,7 @@ export default function App({ Component, pageProps }) {
<meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>
<DefaultSeo {...SEO} />
<Head>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="theme-color" content="#000000" />
<link rel="alternate" type="application/rss+xml" href="/feed.xml" />
</Head>
<LayoutWrapper>
<Component {...pageProps} />
</LayoutWrapper>
<Component {...pageProps} />
</div>
</MDXProvider>
</ThemeProvider>

View File

@ -1,48 +1,64 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
import GoogleFonts from 'next-google-fonts'
import LayoutWrapper from '@/components/LayoutWrapper'
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<GoogleFonts href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" />
<Head>
<link rel="apple-touch-icon" sizes="76x76" href="/static/favicons/apple-touch-icon.png" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/static/favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/static/favicons/favicon-16x16.png"
/>
<link rel="manifest" href="/static/favicons/site.webmanifest" />
<link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="theme-color" content="#000000" />
<link rel="alternate" type="application/rss+xml" href="/static/favicons/index.xml" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="preload"
as="style"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
crossOrigin="anonymous"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
media="print"
onload="this.media='all'"
/>
<link href="/static/favicons/favicon.ico" rel="shortcut icon" />
<link href="/static/favicons/site.webmanifest" rel="manifest" />
<link rel="preconnect" href="https://fonts.gstatic.com/" crossOrigin="" />
<noscript>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
/>
</noscript>
<link
href="/static/favicons/apple-touch-icon.png"
rel="apple-touch-icon"
sizes="180x180"
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css"
integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j"
crossorigin="anonymous"
/>
<link
href="/static/favicons/favicon-32x32.png"
rel="icon"
sizes="32x32"
type="image/png"
/>
<link
href="/static/favicons/favicon-16x16.png"
rel="icon"
sizes="16x16"
type="image/png"
/>
<link color="#00aba9" href="/static/favicons/safari-pinned-tab.svg" rel="mask-icon" />
<link rel="alternate" type="application/rss+xml" href="/index.xml" />
<meta content="IE=edge" httpEquiv="X-UA-Compatible" />
<meta content="#ffffff" name="theme-color" />
<meta content="#00aba9" name="msapplication-TileColor" />
<meta content="/static/favicons/browserconfig.xml" name="msapplication-config" />
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js"
integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ"
crossorigin="anonymous"
></script>
</Head>
<body className="bg-white dark:bg-gray-900 text-black dark:text-white">
<Main />
<NextScript />
<LayoutWrapper>
<Main />
<NextScript />
</LayoutWrapper>
</body>
</Html>
)