Try out new fonts

This commit is contained in:
Sangelo 2023-06-10 13:39:43 +02:00
parent 861032f9ed
commit 6fb37562cd
25 changed files with 122 additions and 1 deletions

View file

@ -1,11 +1,12 @@
@import "@picocss/pico/scss/pico"; /* To import only what you need from Pico [check the documentaion](https://picocss.com/docs/customization.html) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap');
@import url('/assets/fonts/fonts.css');
/* @import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css'); */
/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
h1, h2, h3, h4, h5, h6, body {
font-family: 'IBM Plex Mono', monospace;
font-family: 'Space Grotesk', sans-serif;
// background-color: #ffffff;
// color: #000000;
}
@ -50,6 +51,10 @@ h1, h2, h3, h4, h5, h6, body {
p, li {
cursor: text;
// font-weight: 300;
}
b {
font-weight: 600;
}
article {

View file

@ -0,0 +1,40 @@
/* space-grotesk-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300;
src: url('/assets/fonts/space-grotesk-v15-latin/space-grotesk-v15-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
src: url('/assets/fonts/space-grotesk-v15-latin/space-grotesk-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
src: url('/assets/fonts/space-grotesk-v15-latin/space-grotesk-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
src: url('/assets/fonts/space-grotesk-v15-latin/space-grotesk-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
src: url('/assets/fonts/space-grotesk-v15-latin/space-grotesk-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

View file

@ -0,0 +1,74 @@
/* fonts.css | every font used is loaded here. */
/* martian-mono-100 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Martian Mono';
font-style: normal;
font-weight: 100;
src: url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-100.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-100.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* martian-mono-200 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Martian Mono';
font-style: normal;
font-weight: 200;
src: url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* martian-mono-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Martian Mono';
font-style: normal;
font-weight: 300;
src: url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* martian-mono-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Martian Mono';
font-style: normal;
font-weight: 400;
src: url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* martian-mono-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Martian Mono';
font-style: normal;
font-weight: 500;
src: url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* martian-mono-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Martian Mono';
font-style: normal;
font-weight: 600;
src: url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* martian-mono-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Martian Mono';
font-style: normal;
font-weight: 700;
src: url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* martian-mono-800 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Martian Mono';
font-style: normal;
font-weight: 800;
src: url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('/assets/fonts/martian-mono-v3-latin/martian-mono-v3-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

View file

@ -0,0 +1,2 @@
Martian Mono from Google Fonts
https://fonts.google.com/specimen/Martian+Mono