如何忽略React-Bootstrap默认字体？CSS导入方案无效求助

我正在开发一款React应用，添加React-Bootstrap组件后，它的默认字体覆盖了所有文本样式。我试过网上的方案——在入口文件Index.js里导入自定义CSS并设置字体，但没生效。

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"

我已经按照建议把Bootstrap的CSS导入放在自定义样式表前面，index.css内容为：

@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;
}

但React-Bootstrap还是在覆盖字体样式，影响BrowserRouter内的所有文本，Navbar和页脚不受影响，甚至组件级样式也被覆盖。

内容的提问来源于stack exchange，提问作者killerkody gaming