Use font as npm module

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-02-21 21:29:17 +05:30
parent 318e7c7458
commit 6a9964e889
17 changed files with 33 additions and 266 deletions

View file

@ -1,59 +0,0 @@
/* ---- ROBOTO ---- */
@font-face {
font-family: 'Roboto';
src: url(../public/fonts/roboto/Roboto-Light.ttf);
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url(../public/fonts/roboto/Roboto-Regular.ttf);
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url(../public/fonts/roboto/Roboto-Medium.ttf);
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url(../public/fonts/roboto/Roboto-Bold.ttf);
font-weight: 600;
font-display: swap;
}
/* ---- Inter ---- */
@font-face {
font-family: 'Inter';
src: url(../public/fonts/inter/Inter_vf_slant_weight.ttf);
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url(../public/fonts/inter/Inter_vf_slant_weight.ttf);
font-weight: 350;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url(../public/fonts/inter/Inter_vf_slant_weight.ttf);
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url(../public/fonts/inter/Inter_vf_slant_weight.ttf);
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url(../public/fonts/inter/Inter_vf_slant_weight.ttf);
font-weight: 600;
font-display: swap;
}

5
src/font.js Normal file
View file

@ -0,0 +1,5 @@
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import '@fontsource/inter/variable.css';

View file

@ -1,5 +1,6 @@
import React from 'react';
import ReactDom from 'react-dom';
import './font';
import './index.scss';
import settings from './client/state/settings';

View file

@ -1,5 +1,3 @@
@import url(./font-face.css);
:root {
/* background color | --bg-[background type]: value */
@ -154,7 +152,7 @@
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-bold: 600;
--fw-bold: 700;
/* spacing | --sp-[space]: value */
@ -287,7 +285,7 @@
/* override normal font weight for dark mode */
--fw-normal: 350;
--font-secondary: 'Inter', 'Roboto', sans-serif;
--font-secondary: 'InterVariable', 'Roboto', sans-serif;
}
.dark-theme,