# Need Help in Overriding Bootstrap 4 Variables (Font Problem)

**URL:** <https://talk.jekyllrb.com/t/need-help-in-overriding-bootstrap-4-variables-font-problem/4252>\
**Category:** Help\
**Created:** [April 19, 2020, 12:54pm UTC](https://talk.jekyllrb.com/t/need-help-in-overriding-bootstrap-4-variables-font-problem/4252 "2020-04-19T12:54:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![iamvipinsaini](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/iamvipinsaini/32/2442_2.png) [@iamvipinsaini](https://talk.jekyllrb.com/u/iamvipinsaini)\
**Post date:** [April 19, 2020, 12:54pm UTC](https://talk.jekyllrb.com/t/need-help-in-overriding-bootstrap-4-variables-font-problem/4252/1 "2020-04-19T12:54:44Z")

</div>

Hi,  
I am creating a Jekyll site locally. I added bootstrap 4 to it. Everything is working fine except for the fonts.

Below is the site structure.  
 ![Screenshot_1](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/b/b11d19f20a313c278b0265751db2e153918eaf1a.png)

The **sass\_dir** in **\_config.yml** is set to this.

**sass\_dir: /assets/css/\_sass**

The main file is in the CSS folder and I have imported the bootstrap and base file in the main. as follows:-

Above the import I have defined all the variables like this:-

* * *

* * *

@charset “utf-8”;

// Fetch Fonts  
**AT** import url(“[https://fonts.googleapis.com/css?family=Prompt:400,700](https://fonts.googleapis.com/css?family=Prompt:400,700)”);  
**AT** import url(“[https://fonts.googleapis.com/css?family=Josefin+Sans:400,700](https://fonts.googleapis.com/css?family=Josefin+Sans:400,700)”);

//Heading Variables  
$head-font-family: ‘Josefin Sans’, sans-serif;  
$head-font-size: 25px;  
$head-font-weight: 400;  
$head-line-height: 1.7;  
$head-color: #32325d;

**AT** import  
“bootstrap/bootstrap”,  
“base”  
;

When I try to use the **$head-font-family** in base.scss for h1, h2, h3, h4, h5, h6. It won’t change the font to **Josefin Sans**

It’s fetching the fonts from **assets/css/\_sass/bootstrap/\_variables.scss**

Please help me in resolving the issue. Thanks in advance.