scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Use nextjs font loader

Browse source
This commit is contained in:
Benji Grant 2023-06-09 03:16:18 +10:00
parent c4d47cd034
commit badcbac658
10 changed files with 17 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
frontend/public/fonts/karla-italic-variable.ttf
View file

Binary file not shown.

BIN
frontend/public/fonts/karla-variable.ttf
View file

Binary file not shown.

BIN
frontend/public/fonts/molot.woff
View file

Binary file not shown.

BIN
frontend/public/fonts/samuraibob.woff
View file

Binary file not shown.

23
frontend/src/app/global.css
View file

@ -1,25 +1,3 @@
@font-face {
font-family: 'Karla';
src: url('/fonts/karla-variable.ttf') format('truetype');
font-weight: 200 800;
}
@font-face {
font-family: 'Samurai Bob';
src: url('/fonts/samuraibob.woff2') format('woff2'),
url('/fonts/samuraibob.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Molot';
src: url('/fonts/molot.woff2') format('woff2'),
url('/fonts/molot.woff') format('woff');
font-weight: 400;
font-style: normal;
}
:root { :root {
color-scheme: light dark; color-scheme: light dark;
@ -85,7 +63,6 @@ html {
body { body {
margin: 0; margin: 0;
font-family: 'Karla', sans-serif;
background: var(--background); background: var(--background);
color: var(--text); color: var(--text);
font-weight: var(--font-weight); font-weight: var(--font-weight);

5
frontend/src/app/layout.tsx
View file

@ -1,4 +1,5 @@
import { Metadata } from 'next' import { Metadata } from 'next'
import { Karla } from 'next/font/google'
import Egg from '/src/components/Egg/Egg' import Egg from '/src/components/Egg/Egg'
import Settings from '/src/components/Settings/Settings' import Settings from '/src/components/Settings/Settings'
@ -8,6 +9,8 @@ import { useTranslation } from '/src/i18n/server'
import './global.css' import './global.css'
const karla = Karla({ subsets: ['latin'] })
export const metadata: Metadata = { export const metadata: Metadata = {
metadataBase: new URL('https://crab.fit'), metadataBase: new URL('https://crab.fit'),
title: { title: {
@ -33,7 +36,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
const { resolvedLanguage } = await useTranslation([]) const { resolvedLanguage } = await useTranslation([])
return <html lang={resolvedLanguage ?? fallbackLng}> return <html lang={resolvedLanguage ?? fallbackLng}>
<body> <body className={karla.className}>
<Settings /> <Settings />
<Egg /> <Egg />
<TranslateDialog /> <TranslateDialog />

3
frontend/src/components/Header/Header.module.scss
View file

@ -48,7 +48,6 @@
display: block; display: block;
font-size: 2rem; font-size: 2rem;
color: var(--primary); color: var(--primary);
font-family: 'Molot', sans-serif;
font-weight: 400; font-weight: 400;
text-shadow: 0 2px 0 var(--shadow); text-shadow: 0 2px 0 var(--shadow);
line-height: 1em; line-height: 1em;
@ -72,7 +71,6 @@
margin: 0; margin: 0;
font-size: 3rem; font-size: 3rem;
text-align: center; text-align: center;
font-family: 'Samurai Bob', sans-serif;
font-weight: 400; font-weight: 400;
color: var(--secondary); color: var(--secondary);
line-height: 1em; line-height: 1em;
@ -96,7 +94,6 @@
font-size: 4rem; font-size: 4rem;
text-align: center; text-align: center;
color: var(--primary); color: var(--primary);
font-family: 'Molot', sans-serif;
font-weight: 400; font-weight: 400;
text-shadow: 0 4px 0 var(--shadow); text-shadow: 0 4px 0 var(--shadow);
line-height: 1em; line-height: 1em;

16
frontend/src/components/Header/Header.tsx
View file

@ -1,3 +1,4 @@
import localFont from 'next/font/local'
import Link from 'next/link' import Link from 'next/link'
import { useTranslation } from '/src/i18n/server' import { useTranslation } from '/src/i18n/server'
@ -6,6 +7,15 @@ import { makeClass } from '/src/utils'
import styles from './Header.module.scss' import styles from './Header.module.scss'
const samuraiBob = localFont({
src: './samuraibob.woff2',
fallback: ['sans-serif'],
})
const molot = localFont({
src: './molot.woff2',
fallback: ['sans-serif'],
})
interface HeaderProps { interface HeaderProps {
/** Show the full header */ /** Show the full header */
isFull?: boolean isFull?: boolean
@ -18,12 +28,12 @@ const Header = async ({ isFull, isSmall }: HeaderProps) => {
return <header className={styles.header} data-small={isSmall}> return <header className={styles.header} data-small={isSmall}>
{isFull ? <> {isFull ? <>
{!isSmall && <img className={styles.bigLogo} src={logo.src} alt="" />} {!isSmall && <img className={styles.bigLogo} src={logo.src} alt="" />}
<span className={makeClass(styles.subtitle, !/^[A-Za-z ]+$/.test(t('home:create')) && styles.hasAltChars)}>{t('home:create')}</span> <span className={makeClass(styles.subtitle, samuraiBob.className, !/^[A-Za-z ]+$/.test(t('home:create')) && styles.hasAltChars)}>{t('home:create')}</span>
<h1 className={styles.bigTitle}>CRAB FIT</h1> <h1 className={makeClass(styles.bigTitle, molot.className)}>CRAB FIT</h1>
</> : <Link href="/" className={styles.link}> </> : <Link href="/" className={styles.link}>
<div className={styles.top}> <div className={styles.top}>
<img className={styles.logo} src={logo.src} alt="" /> <img className={styles.logo} src={logo.src} alt="" />
<span className={styles.title}>CRAB FIT</span> <span className={makeClass(styles.title, molot.className)}>CRAB FIT</span>
</div> </div>
<span className={styles.tagline}>{t('common:tagline')}</span> <span className={styles.tagline}>{t('common:tagline')}</span>
</Link>} </Link>}

0
frontend/public/fonts/molot.woff2 → frontend/src/components/Header/molot.woff2
View file

0
frontend/public/fonts/samuraibob.woff2 → frontend/src/components/Header/samuraibob.woff2
View file