From ea5980457391f0866f52a7954ce79981cb8ac92c Mon Sep 17 00:00:00 2001 From: Roger Clotet Date: Thu, 20 May 2021 22:21:30 +0200 Subject: [PATCH] feat: use fonts from @fontsource instead of Google CDN --- components/settings/LanguageButton.js | 57 ++++++++++++--------------- package.json | 4 ++ pages/_app.js | 6 +-- yarn.lock | 20 ++++++++++ 4 files changed, 52 insertions(+), 35 deletions(-) diff --git a/components/settings/LanguageButton.js b/components/settings/LanguageButton.js index 1a9bd33b..66cf1108 100644 --- a/components/settings/LanguageButton.js +++ b/components/settings/LanguageButton.js @@ -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 ( - <> - - {locale === 'zh-CN' && ( - - )} - {locale === 'zh-TW' && ( - - )} - {locale === 'ja-JP' && ( - - )} - - } - options={menuOptions} - value={locale} - menuClassName={styles.menu} - renderValue={option => option?.display} - onSelect={handleSelect} - /> - + } + options={menuOptions} + value={locale} + menuClassName={styles.menu} + renderValue={option => option?.display} + onSelect={handleSelect} + /> ); } diff --git a/package.json b/package.json index f1b4a6ad..41809740 100644 --- a/package.json +++ b/package.json @@ -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.21.2", "@reduxjs/toolkit": "^1.5.1", "bcryptjs": "^2.4.3", diff --git a/pages/_app.js b/pages/_app.js index 71327059..47fdf5d2 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -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 }) { - diff --git a/yarn.lock b/yarn.lock index aca7b2cc..877e0d54 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1135,6 +1135,26 @@ 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@^2.13.16": version "2.13.16" resolved "https://registry.yarnpkg.com/@formatjs/cli/-/cli-2.13.16.tgz#1664e17d0671623ffbbd1bcdcbf4a84f2de429fd"