Ich entwickle eine React-App und habe gerade einige React-Bootstrap-Komponenten hinzugefügt. Das Problem ist, dass sich die Standard-Bootstrap-Schriftart auf meinen gesamten Text auswirkt. Ich habe online nur eine Lösung gefunden, die vorschlug, das CSS in der Eintragsdatei zu verknüpfen und dort den Schriftartimport und die CSS-Schriftarteigenschaften abzulegen, aber das hat für mich nichts geändert. Dies ist das Layout, das ich in Index.js importiert habe:

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"

Wie unten vorgeschlagen, habe ich Bootstrap-Importe zusätzlich zu den Stylesheet-Importen. index.css enthält

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

Allerdings schreibt React-bootstrap meine Schriftstile immer noch in der hässlichsten Schriftart, die ich je gesehen habe.

Es betrifft alle Schriftarten in meinem BrowserRouter. Meine Navigationsleiste und Fußzeile sind davon nicht betroffen. Ich habe sogar versucht, die Stile auf Komponentenebene der Schriftart zu platzieren. Bootstrap wird es immer noch überschreiben.

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