How to make font variables that can be reused in scss - css

Question

I am working on an Angular project and we use scss. We want to standardize our use of fonts throughout the application. For eg. Instead of using font-family: Arial everywhere it should be font-family: $arialFont.
In my current styles.css we have the following.
#font-face {
font-family: "Helvetica_Neue_Light";
src: url("./assets/fonts/eot/HelvNeueLight.eot");
src: url("./assets/fonts/eot/HelvNeueLight.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueLight.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueLight.ttf") format("ttf");
}
#font-face {
font-family: "Helvetica_Neue_Medium";
src: url("./assets/fonts/eot/HelvNeueMedium.eot");
src: url("./assets/fonts/eot/HelvNeueMedium.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueMedium.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueMedium.ttf") format("ttf");
}
#font-face {
font-family: "Helvetica_Neue_Bold";
src: url("./assets/fonts/eot/HelvNeueBold.eot");
src: url("./assets/fonts/eot/HelvNeueBold.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueBoldfor.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueBold.ttf") format("ttf");
}
#font-face {
font-family: "Helvetica_Neue_Light_Italics";
src: url("./assets/fonts/eot/HelvNeueLightItalic.eot");
src: url("./assets/fonts/eot/HelvNeueLightItalic.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueLightItalic.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueLightItalic.ttf") format("ttf");
}
These are simply used as font-family: 'Helvetica_Neue_Bold' or font-family: 'Helvetica_Neue_Light_Italics' in the other scss files. The disadvantage of this is whenever we need to change the font for the app we need to make a change in every single instance. So I need a way to assign each font family name to a variable and use it everywhere so that the next time there is a font change, i only have to change the value of variables in one place,
I have created a fonts.scss where I've put
$helvetica-neue-light: "Helvetica_Neue_Light";
$helvetica-neue-medium: "Helvetica_Neue_Medium";
$helvetica-neue-bold: "Helvetica_Neue_Bold";
$helvetica-neue-light-italics: "Helvetica_Neue_Light_Italics";
I imported it in the first file, styles.css and assigned the variables to font-family. But now I have to import fonts.scss in every single scss file, which is also troublesome. Is there another way to do this task? Please help

Answer 1

If you use sass, then you have to import the file where the variables are defined into every file where you want to use these variables.
An alternative is to use CSS variables. You can declare them in once place and reuse them without import.
styles.scss
:root
{
/** hard coded **/
--helvetica-neue-light: "Helvetica_Neue_Light";
--helvetica-neue-medium: "Helvetica_Neue_Medium";
/** or use sass variable**/
--helvetica-neue-light-italics: $helvetica-neue-light-italics;
}
component.scss
div
{
font-family: var(--helvetica-neue-light);
}
Stackblitz demo
Note: this will not work with IE