fix(typography): embed official Achemine fonts in src/fonts, calibrate font weights and sizes to strictly match SNCF display img 1

This commit is contained in:
mathis committed 2026-08-30 23:56:22 +02:00
1 parent a084f699ac
commit 75d0a05f21
13 files changed
+66 -17

No files matched your search

+25
View File
@@ -11,6 +11,31 @@
/* Styles responsive pour les pages de guidage & sélection */ /* Styles responsive pour les pages de guidage & sélection */
@import "./styles/Launcher.css"; @import "./styles/Launcher.css";
@font-face {
font-family: 'Achemine';
src: url('./fonts/achemine_regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Achemine';
src: url('./fonts/achemine_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Achemine';
src: url('./fonts/achemine_italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face { @font-face {
font-family: Avenir; font-family: Avenir;
src: url("/public/fonts/avenir-lighter.woff"); src: url("/public/fonts/avenir-lighter.woff");
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+25 -1
View File
@@ -1,6 +1,30 @@
@font-face {
font-family: 'Achemine';
src: url('./fonts/achemine_regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Achemine';
src: url('./fonts/achemine_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Achemine';
src: url('./fonts/achemine_italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: 'Achemine', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -262,8 +262,8 @@
/* Colonne 3 : Heure (Grande, jaune vif) */ /* Colonne 3 : Heure (Grande, jaune vif) */
.aff-classiques-arrivees__col-time { .aff-classiques-arrivees__col-time {
width: 250px; width: 260px;
min-width: 250px; min-width: 260px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
@@ -276,7 +276,7 @@
.aff-classiques-arrivees__time { .aff-classiques-arrivees__time {
color: var(--yellow); color: var(--yellow);
font-size: 68px; font-size: 74px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
letter-spacing: -0.5px; letter-spacing: -0.5px;
@@ -302,8 +302,8 @@
.aff-classiques-arrivees__destination { .aff-classiques-arrivees__destination {
color: var(--white); color: var(--white);
font-size: 62px; font-size: 68px;
font-weight: 600; font-weight: 700;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -325,8 +325,8 @@
} }
.aff-classiques-arrivees__platform-box { .aff-classiques-arrivees__platform-box {
width: 88px; width: 90px;
height: 84px; height: 86px;
border: 3.5px solid var(--white); border: 3.5px solid var(--white);
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
@@ -338,7 +338,7 @@
.aff-classiques-arrivees__platform-text { .aff-classiques-arrivees__platform-text {
color: var(--white); color: var(--white);
font-size: 60px; font-size: 62px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
font-family: "Achemine", sans-serif; font-family: "Achemine", sans-serif;
@@ -262,8 +262,8 @@
/* Colonne 3 : Heure (Grande, jaune vif) */ /* Colonne 3 : Heure (Grande, jaune vif) */
.aff-classiques-departs__col-time { .aff-classiques-departs__col-time {
width: 250px; width: 260px;
min-width: 250px; min-width: 260px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
@@ -276,7 +276,7 @@
.aff-classiques-departs__time { .aff-classiques-departs__time {
color: var(--yellow); color: var(--yellow);
font-size: 68px; font-size: 74px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
letter-spacing: -0.5px; letter-spacing: -0.5px;
@@ -302,8 +302,8 @@
.aff-classiques-departs__destination { .aff-classiques-departs__destination {
color: var(--white); color: var(--white);
font-size: 62px; font-size: 68px;
font-weight: 600; font-weight: 700;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -325,8 +325,8 @@
} }
.aff-classiques-departs__platform-box { .aff-classiques-departs__platform-box {
width: 88px; width: 90px;
height: 84px; height: 86px;
border: 3.5px solid var(--white); border: 3.5px solid var(--white);
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
@@ -338,7 +338,7 @@
.aff-classiques-departs__platform-text { .aff-classiques-departs__platform-text {
color: var(--white); color: var(--white);
font-size: 60px; font-size: 62px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
font-family: "Achemine", sans-serif; font-family: "Achemine", sans-serif;