granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement custom font

Browse source 
This implements our custom font at the <body> tag level using useIsomorphicLayoutEffect
This commit is contained in:
Justin Edmund 2023-08-20 04:06:59 -07:00
parent 67b7e3eb73
commit e9ead2c7b3
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
pages/_app.tsx
View file

@ -1,6 +1,8 @@
import { appWithTranslation } from 'next-i18next'
import Head from 'next/head'
import Link from 'next/link'
import localFont from '@next/font/local'
import { useIsomorphicLayoutEffect } from 'react-use'
import { useTranslation } from 'next-i18next'
import { get } from 'local-storage'
import { getCookie, setCookie } from 'cookies-next'
@ -22,6 +24,12 @@ import type { AppProps } from 'next/app'
import DiscordIcon from '~public/icons/discord.svg'
import ShareIcon from '~public/icons/Share.svg'
const goalking = localFont({
src: './fonts/gk-variable.woff2',
fallback: ['system-ui', 'inter', 'helvetica neue', 'sans-serif'],
variable: '--font-goalking',
})
import '../styles/globals.scss'
function MyApp({ Component, pageProps }: AppProps) {
@ -29,6 +37,10 @@ function MyApp({ Component, pageProps }: AppProps) {
const [mounted, setMounted] = useState(false)
const [refresh, setRefresh] = useState(false)
useIsomorphicLayoutEffect(() => {
document.body.style.setProperty('--font-family', goalking.style.fontFamily)
}, [])
// Subscribe to app state to listen for account changes and
// unsubscribe when component is unmounted
const unsubscribe = subscribe(accountState, () => {
@ -111,7 +123,7 @@ function MyApp({ Component, pageProps }: AppProps) {
<div className="Connect">
<p>{t('errors.server_unavailable.discord')}</p>
<div className="Discord LinkItem">
<Link href="https://discord.gg/qyZ5hGdPC8">
<Link legacyBehavior href="https://discord.gg/qyZ5hGdPC8">
<a
href="https://discord.gg/qyZ5hGdPC8"
target="_blank"
@ -146,7 +158,9 @@ function MyApp({ Component, pageProps }: AppProps) {
{!appState.version ? (
serverUnavailable()
) : (
<main>
<Component {...pageProps} />
</main>
)}
</Layout>
<Viewport className="ToastViewport" />

BIN
pages/fonts/gk-variable.woff2 Normal file
View file

Binary file not shown.