title: How can I override bootstrap 4 default font with multiple font-faces?
body: <p>I want to know if it is possible to override bootstrap with a font-face family. I have font-faces:</p>
  
  <pre><code>@font-face {
    font-family: 'customFont Normal';
    font-weight: 400;
    font-style: normal;
    src: local(customFont-Normal),
      url(&lt;filepath&gt;) format(&lt;file_type&gt;);
  }
  
  @font-face {
    font-family: 'customFont Bold';
    font-weight: 700;
    font-style: normal;
    src: local(customFont-Bold),
      url(&lt;filepath&gt;) format(&lt;file_type&gt;);
  }
  
  @font-face {
    font-family: 'customFont Thin';
    font-weight: 200;
    font-style: normal;
    src: local(customFont-Thin),
      url(&lt;filepath&gt;) format(&lt;file_type&gt;);
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>$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;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>@font-face {
    font-family: 'customFont'
    src: url(&lt;normal&gt;) format() font-weight: 400,
      url(&lt;bold&gt;) format() font-weight: 700,
      url(&lt;thin&gt;) format() font-weight: 200,
  }
  </code></pre>
  
  <p>And I tried adding that in front of <code>$font-family-sans-serif</code> but it had ignored and did not apply any font. Is my approach wrong or is there a better method on doing this?</p>
  
  <p>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.</p>