How can I override bootstrap 4 default font with multiple font-faces? - html

Question

I want to know if it is possible to override bootstrap with a font-face family. I have font-faces:
#font-face {
font-family: 'customFont Normal';
font-weight: 400;
font-style: normal;
src: local(customFont-Normal),
url(<filepath>) format(<file_type>);
}
#font-face {
font-family: 'customFont Bold';
font-weight: 700;
font-style: normal;
src: local(customFont-Bold),
url(<filepath>) format(<file_type>);
}
#font-face {
font-family: 'customFont Thin';
font-weight: 200;
font-style: normal;
src: local(customFont-Thin),
url(<filepath>) format(<file_type>);
}
From what I understood with font-face, having multiple font-faces at different weights allows me to automatically apply these fonts to my HTML whenever I specify a weight on the element and it would match to the closest weight. But I am currently using bootstrap v4 and it has its own default font. So I added this to my scss to override it:
$font-family-sans-serif: 'customFont Normal', 'customFont Bold', 'customFont Thin', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
But this only applies the first font-face to my website, and changing the weights on the elements did not change the font. Is there a way to combine all of these together to override bootstrap font while keeping the functionality of font-face? I have read that this may work:
#font-face {
font-family: 'customFont'
src: url(<normal>) format() font-weight: 400,
url(<bold>) format() font-weight: 700,
url(<thin>) format() font-weight: 200,
}
And I tried adding that in front of $font-family-sans-serif but it had ignored and did not apply any font. Is my approach wrong or is there a better method on doing this?
Edit:
I decided to change the names of all the font-family to the same name but kept everything else the same. My second method was giving errors so I went with this method and it seems to be working.

Answer 1

You should name your fonts the same name, now if you change the font-weights, it should switch correctly.
EDIT: Just realized that you've already mentioned this in your question
#font-face {
font-family: 'customFont'
src: url(<normal>) format() font-weight: 400,
url(<bold>) format() font-weight: 700,
url(<thin>) format() font-weight: 200,
}
make sure you override it with the correct font-family:
$font-family-sans-serif: 'customFont', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;