Load fonts only for specific locale changes.

This commit is contained in:
Mike Cao 2020-09-11 13:21:17 -07:00
parent 5a22be5efa
commit 01432266ef
2 changed files with 31 additions and 18 deletions

View File

@ -1,4 +1,5 @@
import React, { useState, useRef } from 'react';
import Head from 'next/head';
import Globe from 'assets/globe.svg';
import useDocumentClick from 'hooks/useDocumentClick';
import Menu from './Menu';
@ -26,6 +27,21 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
});
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 === 'jp-JP' && (
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
rel="stylesheet"
/>
)}
</Head>
<div ref={ref} className={styles.container}>
<Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small">
<div className={locale}>{selectedLocale}</div>
@ -40,5 +56,6 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
/>
)}
</div>
</>
);
}

View File

@ -13,10 +13,6 @@ export default function Layout({ title, children, header = true, footer = true }
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
</Head>
{header && <Header />}
<main className="container">{children}</main>