Html Question posted in
Some basic documentation can be found here.

Html – Can’t Override BootStrap Font Styles With Vanilla CSS

My browser shows only the default BootStrap fonts
Is it possible to fix this problem without using Sass?

Other Details to keep in mind:

  1. Using Live Server Vscode Extension
  2. I’m a beginner
  3. I am using BootStrap 5
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap demo</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Danfo&display=swap');
        :rout,
        [data-bs-theme=light] {
            --bs-body-font-family: "Danfo", var(--bs-font-sans-serif) !important;
        }

        :rout,
        [data-bs-theme=dark] {
            --bs-body-font-family: "Danfo", var(--bs-font-sans-serif) !important;
        }
    </style>
</head>

<body>
    <div class="container text-center">
        <div class="row g=0">
            <div class="col-auto bg-primary text-white">Font</div>
            <div class="col-5 bg-danger text-white">Welcome, Home...</div>
        </div>
        <div class="row">
            <div class="col bg-black text-white">Welcome, Home...</div>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>```
Tags:

3

Answers


  1. 0

    You can go to the bootstrap docs, and get the CSS variables from whichever module of bootstrap you are trying to edit. usually using !important works, but if this does not work then you can modify the bootstrap CSS variables then insert the variables into whatever property you are trying to change.

    Login or Signup to reply.
  2. 0

    Your current CSS defines a new variable --bs-body-font-family without applying it anywhere.

    Besides you have a typo :rout selector should be :root.
    Here’s a simple example applying the new variable to the HTML body.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">


<style>
  @import url("https://fonts.googleapis.com/css2?family=Danfo&display=swap");
  :root {
    --bs-body-font-family: "Danfo", var(--bs-font-sans-serif);
  }
  
  body {
    font-family: var(--bs-body-font-family)
  }
</style>
<div class="container text-center">
  <div class="row g=0">
    <div class="col-auto bg-primary text-white txt1">Font</div>
    <div class="col-5 bg-danger text-white">Welcome, Home...</div>
  </div>
  <div class="row">
    <div class="col bg-black text-white">Welcome, Home...</div>
  </div>

</div>
    Login or Signup to reply.
  3. 0

    Your code is correct and it’s simple to do but as you are a new coder here how you can do it:-

    Using Body {}

    Remove your previous styles and add the font like

    Body { @import url('https://fonts.googleapis.com/css2?family=Danfo&display=swap'); body { font-family: 'Danfo', sans-serif !important; } }

    Or you can also use the :root {} variable like this

    @import url('https://fonts.googleapis.com/css2?family=Danfo&display=swap'); :root { --bs-body-font-family: 'Danfo', sans-serif !important; }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search