skip to Main Content

I’m trying to change the default font-family in Bootstrap but my changes are ignored.

This issue is closed on the repo (https://github.com/twbs/bootstrap/issues/21595) but I still have the problem.

> bundle info bootstrap
=> bootstrap (4.1.3)

I have bootstrap-custom.scss:

/*!
 * Bootstrap v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

 ...
 @import "bootstrap/variables";
 ...

_variables.scss:

...
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif:  "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base:        $font-family-sans-serif !default;
...

And I import it in application.scss at the top of my file:

@import "bootstrap-custom";
@import "variables";

If I try this css, that doesn’t work:

body {
  font-family: $font-family-base;
}

But if I change the name of $font-family-base in the _variables.scss and use the new variable in body, it works.

Do I something wrong?

2

Answers


  1. Chosen as BEST ANSWER

    Finally, I upgraded the bootstrap gem from 4.1.3 to 4.2.1. Then, I removed bootstrap-custom.scss file, import the whole official _variables.scss file, and import bootstrap with all files.

    Also, I had to import bootstrap/functions before variables. Now the custom variables work.


  2. There are very fewer chances of this, but did you check the file names correctly?

    From your code, it seems that custom style file name is bootstrap_custom.scss and the one which you have imported is bootstrap-custom.

    See the difference of _ (underscore) and – (dash/hyphen) in file names.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search