app/fonts: switch out sans serif font, use fontsource · samanthanguyen.me/drifting-starlight@8cbc4dd

··· 4 4 "semi": false, 5 5 "singleQuote": true, 6 6 "trailingComma": "all", 7 - "ignorePatterns": ["app/src/generated/**", "app/src/utilities.css"], 7 + "ignorePatterns": ["app/src/generated/**", "app/src/app.html", "app/src/utilities.css"], 8 8 "experimentalTailwindcss": { 9 9 "stylesheet": "./app/src/app.css", 10 10 "attributes": ["class", "className"],

app/package.json

··· 23 23 "supabase-types-local": "supabase gen types typescript --local > src/generated/database.types.ts && pnpm run fmt" 24 24 }, 25 25 "dependencies": { 26 + "@fontsource-variable/fraunces": "catalog:app", 27 + "@fontsource-variable/suse": "catalog:app", 26 28 "@lucide/svelte": "catalog:svelte", 27 29 "@starlight/icons": "workspace:../packages/icons", 28 30 "@starlight/tokenizer": "workspace:../packages/tokenizer",

+3 -15

app/src/app.css

··· 1 1 @import 'tailwindcss'; 2 2 @import 'tw-animate-css'; 3 + @import './fonts.css'; 3 4 @import './utilities.css'; 4 5 @import './shadcn-svelte.css'; 5 6 @source './../../node_modules/@starlight/icons'; ··· 9 10 @theme { 10 11 --color-hsr-gold: #9f7755; 11 12 --color-hsr-dark: #151512; 12 - 13 - --font-sans: 14 - 'DIN Pro', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 15 - 'Segoe UI Symbol', 'Noto Color Emoji'; 16 - --font-script: 'Hsr _ Jariloivhertaspacestation', sans-serif; 17 - --font-serif: 'Fraunces', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; 18 13 } 19 14 20 - @utility bg-diagonal-lines { 21 - background-image: repeating-linear-gradient( 22 - -45deg, 23 - currentColor 0, 24 - currentColor 1px, 25 - transparent 0, 26 - transparent 50% 27 - ); 28 - background-size: 10px 10px; 15 + body { 16 + font-feature-settings: 'zero' off; 29 17 }

+6 -78

app/src/app.html

··· 9 9 as="font" 10 10 href="%sveltekit.assets%/fonts/Hsr-Universal-Script.otf" 11 11 /> 12 - <link 13 - rel="prefetch" 14 - type="font/otf" 15 - as="font" 16 - href="%sveltekit.assets%/fonts/DinPro/DinPro.otf" 17 - /> 18 - <link 19 - rel="prefetch" 20 - type="font/otf" 21 - as="font" 22 - href="%sveltekit.assets%/fonts/DinPro/DinPro-Italic.otf" 23 - /> 24 - <link 25 - rel="prefetch" 26 - type="font/otf" 27 - as="font" 28 - href="%sveltekit.assets%/fonts/DinPro/DinPro-Medium.otf" 29 - /> 30 - <link 31 - rel="prefetch" 32 - type="font/otf" 33 - as="font" 34 - href="%sveltekit.assets%/fonts/DinPro/DinPro-Medium-Italic.otf" 35 - /> 36 - <link 37 - rel="prefetch" 38 - type="font/otf" 39 - as="font" 40 - href="%sveltekit.assets%/fonts/DinPro/DinPro-Bold.otf" 41 - /> 42 - <link 43 - rel="prefetch" 44 - type="font/otf" 45 - as="font" 46 - href="%sveltekit.assets%/fonts/DinPro/DinPro-Bold-Italic.otf" 47 - /> 48 12 <link rel="icon" href="%sveltekit.assets%/favicons/favicon.svg" /> 49 13 <link rel="icon" href="%sveltekit.assets%/favicons/favicon.ico" /> 50 - <link 51 - type="image/png" 52 - sizes="16x16" 53 - rel="icon" 54 - href="%sveltekit.assets%/favicons/favicon-16x16.png" 55 - /> 56 - <link 57 - type="image/png" 58 - sizes="32x32" 59 - rel="icon" 60 - href="%sveltekit.assets%/favicons/favicon-32x32.png" 61 - /> 62 - <link 63 - type="image/png" 64 - sizes="192x192" 65 - rel="icon" 66 - href="%sveltekit.assets%/favicons/android-chrome-192x192.png" 67 - /> 68 - <link 69 - type="image/png" 70 - sizes="512x512" 71 - rel="icon" 72 - href="%sveltekit.assets%/favicons/android-chrome-512x512.png" 73 - /> 74 - <link 75 - type="image/png" 76 - sizes="180x180" 77 - rel="apple-touch-icon" 78 - href="%sveltekit.assets%/favicons/apple-touch-icon.png" 79 - /> 80 - <link 81 - type="image/png" 82 - sizes="180x180" 83 - rel="apple-touch-icon-precomposed" 84 - href="%sveltekit.assets%/favicons/apple-touch-icon-precomposed.png" 85 - /> 86 - <link rel="preconnect" href="https://fonts.googleapis.com" /> 87 - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" /> 88 - <link 89 - rel="stylesheet" 90 - href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap" 91 - /> 14 + <link type="image/png" sizes="16x16" rel="icon" href="%sveltekit.assets%/favicons/favicon-16x16.png" /> 15 + <link type="image/png" sizes="32x32" rel="icon" href="%sveltekit.assets%/favicons/favicon-32x32.png" /> 16 + <link type="image/png" sizes="192x192" rel="icon" href="%sveltekit.assets%/favicons/android-chrome-192x192.png" /> 17 + <link type="image/png" sizes="512x512" rel="icon" href="%sveltekit.assets%/favicons/android-chrome-512x512.png" /> 18 + <link type="image/png" sizes="180x180" rel="apple-touch-icon" href="%sveltekit.assets%/favicons/apple-touch-icon.png" /> 19 + <link type="image/png" sizes="180x180" rel="apple-touch-icon-precomposed" href="%sveltekit.assets%/favicons/apple-touch-icon-precomposed.png" /> 92 20 %sveltekit.head% 93 21 </head> 94 22 <body data-sveltekit-preload-data="hover">

+8 -55

app/src/fonts.css

··· 1 - /** Fonts */ 1 + @theme { 2 + --font-sans: 3 + 'SUSE Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 4 + 'Segoe UI Symbol', 'Noto Color Emoji'; 5 + --font-script: 'Hsr _ Jariloivhertaspacestation', sans-serif; 6 + --font-serif: 'Fraunces Variable', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; 7 + } 8 + 2 9 @font-face { 3 10 font-family: 'Hsr _ Jariloivhertaspacestation'; 4 11 font-style: normal; ··· 8 15 url('/fonts/Hsr-Universal-Script.otf') format('opentype'); 9 16 font-display: swap; 10 17 } 11 - 12 - @font-face { 13 - font-family: 'DIN Pro'; 14 - font-style: normal; 15 - src: 16 - local('DIN Pro'), 17 - url('/fonts/DinPro/DinPro.otf') format('opentype'); 18 - font-weight: 400; 19 - } 20 - 21 - @font-face { 22 - font-family: 'DIN Pro'; 23 - font-style: normal; 24 - src: 25 - local('DIN Pro'), 26 - url('/fonts/DinPro/DinPro-Medium.otf') format('opentype'); 27 - font-weight: 500; 28 - } 29 - 30 - @font-face { 31 - font-family: 'DIN Pro'; 32 - font-style: normal; 33 - src: 34 - local('DIN Pro'), 35 - url('/fonts/DinPro/DinPro-Bold.otf') format('opentype'); 36 - font-weight: 700; 37 - } 38 - 39 - @font-face { 40 - font-family: 'DIN Pro'; 41 - font-style: italic; 42 - src: 43 - local('DIN Pro'), 44 - url('/fonts/DinPro/DinPro-Italic.otf') format('opentype'); 45 - font-weight: 400; 46 - } 47 - 48 - @font-face { 49 - font-family: 'DIN Pro'; 50 - font-style: italic; 51 - src: 52 - local('DIN Pro'), 53 - url('/fonts/DinPro/DinPro-Medium-Italic.otf') format('opentype'); 54 - font-weight: 500; 55 - } 56 - 57 - @font-face { 58 - font-family: 'DIN Pro'; 59 - font-style: italic; 60 - src: 61 - local('DIN Pro'), 62 - url('/fonts/DinPro/DinPro-Bold-Italic.otf') format('opentype'); 63 - font-weight: 700; 64 - }

+4 -1

app/src/routes/+layout.svelte

··· 16 16 import { Separator } from '$ui/Separator' 17 17 import type { LayoutProps } from './$types' 18 18 import './../app.css' 19 - import './../fonts.css' 19 + import '@fontsource-variable/suse' 20 + import '@fontsource-variable/suse/wght-italic.css' 21 + import '@fontsource-variable/fraunces' 22 + import '@fontsource-variable/fraunces/wght-italic.css' 20 23 21 24 type Props = WithChildren<LayoutProps> 22 25 let { data, children }: Props = $props()

+13

app/src/utilities.css

··· 1 + /** typography */ 1 2 @utility small-caps { font-variant-caps: small-caps; } 2 3 @utility max-w-10ch { max-width: 10ch; } 3 4 @utility max-w-15ch { max-width: 15ch; } ··· 12 13 @utility max-w-100ch { max-width: 100ch; } 13 14 @utility max-w-110ch { max-width: 110ch; } 14 15 @utility max-w-120ch { max-width: 120ch; } 16 + 17 + /** background */ 18 + @utility bg-diagonal-lines { 19 + background-image: repeating-linear-gradient( 20 + -45deg, 21 + currentColor 0, 22 + currentColor 1px, 23 + transparent 0, 24 + transparent 50% 25 + ); 26 + background-size: 10px 10px; 27 + }

app/static/fonts/DinPro/DinPro-Black-Italic.otf