Merge pull request #677 from rogerclotet/local-fonts

feat: use fonts from @fontsource instead of Google CDN
This commit is contained in:
Mike Cao 2021-05-21 10:27:16 -07:00 committed by GitHub
commit c365e023ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 35 deletions

View File

@ -1,5 +1,4 @@
import React from 'react';
import Head from 'next/head';
import { menuOptions } from 'lib/lang';
import useLocale from 'hooks/useLocale';
import MenuButton from 'components/common/MenuButton';
@ -13,36 +12,32 @@ export default function LanguageButton() {
setLocale(value);
}
switch (locale) {
case 'zn-CN':
import('@fontsource/noto-sans-sc/400.css');
import('@fontsource/noto-sans-sc/500.css');
import('@fontsource/noto-sans-sc/700.css');
break;
case 'zh-TW':
import('@fontsource/noto-sans-tc/400.css');
import('@fontsource/noto-sans-tc/500.css');
import('@fontsource/noto-sans-tc/700.css');
break;
case 'ja-JP':
import('@fontsource/noto-sans-jp/400.css');
import('@fontsource/noto-sans-jp/500.css');
import('@fontsource/noto-sans-jp/700.css');
break;
}
return (
<>
<Head>
{locale === 'zh-CN' && (
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
rel="stylesheet"
/>
)}
{locale === 'zh-TW' && (
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap"
rel="stylesheet"
/>
)}
{locale === 'ja-JP' && (
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
rel="stylesheet"
/>
)}
</Head>
<MenuButton
icon={<Globe />}
options={menuOptions}
value={locale}
menuClassName={styles.menu}
renderValue={option => option?.display}
onSelect={handleSelect}
/>
</>
<MenuButton
icon={<Globe />}
options={menuOptions}
value={locale}
menuClassName={styles.menu}
renderValue={option => option?.display}
onSelect={handleSelect}
/>
);
}

View File

@ -56,6 +56,10 @@
}
},
"dependencies": {
"@fontsource/inter": "^4.3.0",
"@fontsource/noto-sans-jp": "^4.3.0",
"@fontsource/noto-sans-sc": "^4.3.0",
"@fontsource/noto-sans-tc": "^4.3.0",
"@prisma/client": "2.23.0",
"@reduxjs/toolkit": "^1.5.1",
"bcryptjs": "^2.4.3",

View File

@ -10,6 +10,8 @@ import { messages } from 'lib/lang';
import 'styles/variables.css';
import 'styles/bootstrap-grid.css';
import 'styles/index.css';
import '@fontsource/inter/400.css';
import '@fontsource/inter/600.css';
const Intl = ({ children }) => {
const [locale] = useLocale();
@ -38,10 +40,6 @@ export default function App({ Component, pageProps }) {
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
rel="stylesheet"
/>
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

View File

@ -1153,10 +1153,31 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"
"@fontsource/inter@^4.3.0":
version "4.3.0"
resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.3.0.tgz#deb5c5d5d2ce0d8d16173a68ba1e961741ef6d30"
integrity sha512-qtUF+Fn9vH4O7V/13kOeemEJpQfhTMxtnOJzJw3kY7SOwl1cbs4fnd9QnQOczU3AVBJEPF1ik639uvaOg7g43A==
"@fontsource/noto-sans-jp@^4.3.0":
version "4.3.0"
resolved "https://registry.yarnpkg.com/@fontsource/noto-sans-jp/-/noto-sans-jp-4.3.0.tgz#e1a715f24e199d9bd8a9e14e7fffea24cbd228b2"
integrity sha512-EbPYK7/08Qll9SR+BvX23y4+v/uH+wJmblIQKRT76f7OZotIIbX3Sx7QGImhEidhPh4LpRdpQYJPnCw6UxtD6A==
"@fontsource/noto-sans-sc@^4.3.0":
version "4.3.0"
resolved "https://registry.yarnpkg.com/@fontsource/noto-sans-sc/-/noto-sans-sc-4.3.0.tgz#fa720aef0cc9396ae37dc6c488d2301ae6719455"
integrity sha512-AqtGDzgX5mFEe3eLMvawqHOOcr3HKg2ExXip5h7PTnKUP7pJynIhRtpDjJgNeWNocamX8fQhiXtf1EW1IqIgDQ==
"@fontsource/noto-sans-tc@^4.3.0":
version "4.3.0"
resolved "https://registry.yarnpkg.com/@fontsource/noto-sans-tc/-/noto-sans-tc-4.3.0.tgz#68037d03f4de203f6ed8246562301b12b06fe665"
integrity sha512-WjCk+II1TPcd749w+o1as4DQXtg/mOXA3y9/cIE+iU6f8Knt1eOlvH7akfMwtjN0PmtaUcMHWe2HqI6gZNDjeQ==
"@formatjs/cli@^4.2.15":
version "4.2.15"
resolved "https://registry.yarnpkg.com/@formatjs/cli/-/cli-4.2.15.tgz#1546c504fb608a36ad1d819be812786533d690f9"
integrity sha512-B8fMtNMJViBRocRPlt9iPzuJa5/wadVHj0tySITGXQd9T1SyijuBMlxHRWrq4jyx6wZSIN5AwapWZkeHMZQ9YA==
dependencies:
"@formatjs/icu-messageformat-parser" "2.0.3"
"@formatjs/ts-transformer" "3.3.14"