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

replace Goalking with AGrot font

Browse source
This commit is contained in:
Justin Edmund 2025-12-02 08:39:32 -08:00
parent 13f78e4bf8
commit 919eee8cde
2 changed files with 62 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
.storybook/preview-head.html
View file

@ -1,10 +1,60 @@
<link rel="preload" href="/fonts/gk-variable.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="https://siero-img.s3-us-west-2.amazonaws.com/fonts/437fb160c86d1771.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="https://siero-img.s3-us-west-2.amazonaws.com/fonts/a9a1343791e012e7.woff2" as="font" type="font/woff2" crossorigin />
<style>
@font-face {
font-family: 'Goalking';
src: url('/fonts/gk-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-family: 'AGrot';
src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/437fb160c86d1771.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'AGrot';
src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/90e2044c61d1d575.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'AGrot';
src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/db6054d73906f6d1.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'AGrot';
src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/54cf3d47648cbde4.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'AGrot';
src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/a9a1343791e012e7.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'AGrot';
src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/0137ea08b8d14fae.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'AGrot';
src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/83b98eb4efef82d6.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'AGrot';
src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/8fd873f2349d20e6.woff2') format('woff2');
font-weight: 900;
font-style: italic;
font-display: swap;
}
</style>

14
src/stories/foundations/Typography.mdx
View file

@ -4,15 +4,15 @@ import { Meta, Typeset } from '@storybook/addon-docs/blocks';
# Typography
Hensei uses the **Goalking** variable font as its primary typeface, with system fonts as fallbacks.
Hensei uses the **AGrot** font family as its primary typeface, with system fonts as fallbacks.
## Font Family
```css
--font-family: 'Goalking', system-ui, sans-serif;
--font-family: 'AGrot', system-ui, sans-serif;
```
The Goalking font is a variable font supporting weights from 100-900, loaded from `/fonts/gk-variable.woff2`.
The AGrot font family supports weights 400, 500, 700, and 900 (with italic variants), loaded from AWS S3.
## Font Weights
@ -20,7 +20,8 @@ The Goalking font is a variable font supporting weights from 100-900, loaded fro
|--------|-------|-------|
| Normal | 400 | Body text, descriptions |
| Medium | 500 | Labels, emphasized text |
| Bold | 600 | Headings, important text |
| Bold | 700 | Headings, important text |
| Black | 900 | Extra emphasis |
## Font Sizes
@ -39,7 +40,7 @@ Our font sizes use `rem` units based on a 10px base (62.5% of 16px), making calc
]}
fontWeight={400}
sampleText="The quick brown fox jumps over the lazy dog"
fontFamily="'Goalking', system-ui, sans-serif"
fontFamily="'AGrot', system-ui, sans-serif"
/>
### Size Scale
@ -61,7 +62,8 @@ Our font sizes use `rem` units based on a 10px base (62.5% of 16px), making calc
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', margin: '24px 0' }}>
<div style={{ fontSize: '18px', fontWeight: 400 }}>Normal (400): The quick brown fox jumps over the lazy dog</div>
<div style={{ fontSize: '18px', fontWeight: 500 }}>Medium (500): The quick brown fox jumps over the lazy dog</div>
<div style={{ fontSize: '18px', fontWeight: 600 }}>Bold (600): The quick brown fox jumps over the lazy dog</div>
<div style={{ fontSize: '18px', fontWeight: 700 }}>Bold (700): The quick brown fox jumps over the lazy dog</div>
<div style={{ fontSize: '18px', fontWeight: 900 }}>Black (900): The quick brown fox jumps over the lazy dog</div>
</div>
## Usage in SCSS