how to override bootstrap font family?

Question

My custom CSS

@font-face {
    font-family: 'DINAlternateBold';
    src: url(./fonts/din/DINAlternateBold.otf);
    }

h4.DINAlternateBold-font {
    font-family: 'DINAlternateBold', sans-serif !important ;
    }

html tag

<h4 class="DINAlternateBold-font text-uppercase">Dashboard</h4>

Currently its showing in console as below, but i want to overwrite with my custom font file

font-family": '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'

review https://stackoverflow.com/questions/20721248/best-way-to-override-bootstrap-css — Vipul, Jul 09 '18 at 06:05
the font family is not changing in my html file, it shows this font-family": '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' in the styles of console. not understanding why it is happening — Asif Ahmed, Jul 09 '18 at 06:13

score 2 · Accepted Answer · answered Jul 09 '18 at 06:11

2

Be sure that your link to css is after your link to bootstrap which would help you to override it. For eg:

<html lang="" dir="ltr">
  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="style.css"> <!-- Your Style -->
  <body>

  </body>
</html>

answered Jul 09 '18 at 06:11

Lucifer

645
6
14

I forgot to include in my angular-cli.json file – Asif Ahmed Jul 09 '18 at 06:18

score 1 · Answer 2 · answered Jul 09 '18 at 06:15

Accoriding you use !important you override bootstrap definition

@font-face {
    font-family: 'DINAlternateBold';
    src: url(./fonts/din/DINAlternateBold.otf);
    }

h4.DINAlternateBold-font {
    font-family: 'DINAlternateBold', sans-serif !important ;
    }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<h4 class="DINAlternateBold-font text-uppercase">Dashboard</h4>
<h4 class="text-uppercase">I am without override</h4>

But you can do it without !important put your stylesheet file link after bootstrap links/scripts

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
//Your file link
<link rel="stylesheet" href="yourStyle.css">

how to override bootstrap font family?

2 Answers2