Change font family in bootstrap?-CodePudding

I want to use a different open font in bootstrap and have it stored locally (no CDN). Would I write a CSS rule to overwrite Bootstraps or just look for where the fonts are stored in Bootstrap, rip it out and shove in the one I want...?

CodePudding user response：

You should write your own css rule, digging through bootstraps minified css files is a pain in the butt! Something like this for the declaration

@font-face {
   font-family: "CustomFont";
   src: url("https://yoursite.com/css/fonts/CustomFont.eot");
   src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
   url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
   url("https://yoursite.com/css/fonts/CustomFont.svg#filename") 
   format("svg");
}

And to apply you would either specify per tag or just set it to the body

Heading / paragraph / anchor / whatever tag:

h1 {
   font-family: 'CustomFont', Arial, sans-serif;
}

Body:

body {
   font-family: 'CustomFont', Arial, sans-serif;
}

CodePudding user response：

As with any library/css framework, you should never change any framework code. If the library updates/changes, you will most likely lose those changes.

Instead, create a css file that adds the font-face and overwrites the font.

/* styles.css */

@font-face {
    font-family: 'Some Name';
    src: url('/path-to/Font.ttf');
}

body {
    font-family: 'Some Name';
}

Include this stylesheet after the Bootstrap stylesheet.

<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="styles.css"/>

CodePudding user response：

Bootstrap has actually made this very simple to do.
You can simply set the value of the appropriate CSS variable in a stylesheet loaded after bootstrap.css
In my example I'm using two Google fonts, so you will need to replace with yours.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Kdam Thmor Pro&family=VT323&display=swap');
    body {
      --bs-font-sans-serif: 'Kdam Thmor Pro', sans-serif;
      --bs-body-font-family: var(--bs-font-sans-serif);
      --bs-font-monospace: 'VT323', monospace;
    }
  </style>
</head>

<body>
  <h1 >Hello, world!</h1>
  <p >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis leo rutrum, porta turpis ut, dictum purus. Praesent pulvinar tempor finibus. Vestibulum tincidunt, mauris quis fringilla finibus, purus velit facilisis nulla, sed tincidunt lorem ante
    a ante. Aliquam id massa aliquet, vulputate magna et, accumsan nulla. Ut ultricies urna eget justo hendrerit, eget imperdiet arcu tempor. Nullam lectus quam, elementum ut pretium vel, consectetur sed erat. Fusce semper, metus sed varius condimentum,
    turpis massa consequat nibh, vel consectetur dui elit a dolor. Vestibulum bibendum gravida justo semper accumsan. Phasellus eget orci sed nisl semper luctus.
  </p>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>

</html>