How to ignore React-Bootstrap default font?

Question

I'm developing a react app and I've just added some react bootstrap components. The problem is that the default bootstrap font affects all my text. I only found one solution online which suggested linking the css in the entry file and putting the font import and css font properties there, but this didn't change anything for me. This is the layout I imported in Index.js:

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"


import 'bootstrap/dist/css/bootstrap.min.css';
import "./stylesheets/index.css"

As suggested below, I have bootstrap imports on top of the stylesheet imports. index.css contains

@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

  * {
      box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background-color: #7f0b0d;
    font-family: 'Kanit', sans-serif;
  }

However, React-bootstrap still writes my font styles in the ugliest font I have ever seen.

It affects all fonts within my BrowserRouter. My navbar and footer are unaffected. I even tried putting the styles at the component level of the font. Bootstrap will still override it.

CodeSandbox: https://codesandbox.io/s/exciting-moser-pdoq66?file=/src/index.js

Answer 1

import ReactDOM from "react-dom/client"
import App from "./App"
import "bootstrap/dist/css/bootstrap.min.css";
import "./stylesheets/index.css"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  
    
      
    
  
)

The order of imports is important, if you import bootstrap after your css file, then the boostrap styles will override your styles. So update your imports as shown above.

Here is the link to Sandbox