thohlt/thiloho.github.io
1
0
Fork 0
mirror of https://github.com/thiloho/thiloho.github.io.git synced 2025-11-22 10:21:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add custom fonts

Browse Source
This commit is contained in:
thiloho
2025-07-18 23:01:17 +02:00
parent dee75911c3
commit 1c0bb4ad8d
60 changed files with 535 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

535
src/styles/global.css
View File

@@ -1,10 +1,535 @@
@import "tailwindcss";
@import "@fontsource-variable/roboto";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--font-sans: "Roboto Variable", "sans-serif";
@layer base {
body {
font-family: "Tiempos Text", serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Styrene A", sans-serif;
}
code,
kbd,
samp,
pre,
pre code {
font-family: "Styrene B", monospace;
}
}
/* Styrene A Font Family */
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-Thin-Trial-BF63f6cbd91263f.otf")
format("opentype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-ThinItalic-Trial-BF63f6cbd95634b.otf")
format("opentype");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-Light-Trial-BF63f6cbd99dc3e.otf")
format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-LightItalic-Trial-BF63f6cbd9cb933.otf")
format("opentype");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-Regular-Trial-BF63f6cbd970ee9.otf")
format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-RegularItalic-Trial-BF63f6cbd94325f.otf")
format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-Medium-Trial-BF63f6cdb24b6d.otf")
format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-MediumItalic-Trial-BF63f6cbd925a68.otf")
format("opentype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-Bold-Trial-BF63f6cbda1877f.otf")
format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-BoldItalic-Trial-BF63f6cbd9bec08.otf")
format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-Black-Trial-BF63f6cbd9da245.otf")
format("opentype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene A";
src: url("/fonts/styrene/StyreneA-BlackItalic-Trial-BF63f6cbd7cb688.otf")
format("opentype");
font-weight: 900;
font-style: italic;
font-display: swap;
}
/* Styrene B Font Family */
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-Thin-Trial-BF63f6cc84a4246.otf")
format("opentype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-ThinItalic-Trial-BF63f6cbe8d3333.otf")
format("opentype");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-Light-Trial-BF63f6cbe64b47b.otf")
format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-LightItalic-Trial-BF63f6cbe9d67d1.otf")
format("opentype");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-Regular-Trial-BF63f6cbe9db1d5.otf")
format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-RegularItalic-Trial-BF63f6cbe5c1942.otf")
format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-Medium-Trial-BF63f6cc85760c2.otf")
format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-MediumItalic-Trial-BF63f6cc84a421a.otf")
format("opentype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-Bold-Trial-BF63f6cbe9f13bb.otf")
format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-BoldItalic-Trial-BF63f6cbe6863e6.otf")
format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-Black-Trial-BF63f6cbe3dc69b.otf")
format("opentype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Styrene B";
src: url("/fonts/styrene/StyreneB-BlackItalic-Trial-BF63f6cbe2d985b.otf")
format("opentype");
font-weight: 900;
font-style: italic;
font-display: swap;
}
/* Tiempos Fine Font Family */
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-Light-BF66457a5102792.otf")
format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-LightItalic-BF66457a50eb132.otf")
format("opentype");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-Regular-BF66457a50e8bc9.otf")
format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-RegularItalic-BF66457a50e36f9.otf")
format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-Medium-BF66457a50e62cd.otf")
format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-MediumItalic-BF66457a511be83.otf")
format("opentype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-Semibold-BF66457a50f016a.otf")
format("opentype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-SemiboldItalic-BF66457a50b0e18.otf")
format("opentype");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-Bold-BF66457a510211b.otf")
format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-BoldItalic-BF66457a50b8568.otf")
format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-Black-BF66457a508fe8f.otf")
format("opentype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Fine";
src: url("/fonts/tiempos/TestTiemposFine-BlackItalic-BF66457a510424a.otf")
format("opentype");
font-weight: 900;
font-style: italic;
font-display: swap;
}
/* Tiempos Headline Font Family */
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-Light-BF66457a50df5a0.otf")
format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-LightItalic-BF66457a5088153.otf")
format("opentype");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-Regular-BF66457a508e31a.otf")
format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-RegularItalic-BF66457a5091d70.otf")
format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-Medium-BF66457a509b4ec.otf")
format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-MediumItalic-BF66457a50b4260.otf")
format("opentype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-Semibold-BF66457a509040b.otf")
format("opentype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-SemiboldItalic-BF66457a510c462.otf")
format("opentype");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-Bold-BF66457a5113d17.otf")
format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-BoldItalic-BF66457a5072af7.otf")
format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-Black-BF66457a50e385b.otf")
format("opentype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Headline";
src: url("/fonts/tiempos/TestTiemposHeadline-BlackItalic-BF66457a505495d.otf")
format("opentype");
font-weight: 900;
font-style: italic;
font-display: swap;
}
/* Tiempos Text Font Family */
@font-face {
font-family: "Tiempos Text";
src: url("/fonts/tiempos/TestTiemposText-Regular-BF66457a50cd521.otf")
format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Text";
src: url("/fonts/tiempos/TestTiemposText-RegularItalic-BF66457a50421c2.otf")
format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Text";
src: url("/fonts/tiempos/TestTiemposText-Medium-BF66457a508489a.otf")
format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Text";
src: url("/fonts/tiempos/TestTiemposText-MediumItalic-BF66457a508d6d9.otf")
format("opentype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Text";
src: url("/fonts/tiempos/TestTiemposText-Semibold-BF66457a4fed201.otf")
format("opentype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Text";
src: url("/fonts/tiempos/TestTiemposText-SemiboldItalic-BF66457a505477c.otf")
format("opentype");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Tiempos Text";
src: url("/fonts/tiempos/TestTiemposText-Bold-BF66457a4f03c40.otf")
format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Tiempos Text";
src: url("/fonts/tiempos/TestTiemposText-BoldItalic-BF66457a50155b4.otf")
format("opentype");
font-weight: 700;
font-style: italic;
font-display: swap;
}