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

18
pages/_app.tsx
View file

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

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

Binary file not shown.