Issue with overriding font-family variable in Bootstrap 5 not resolving

I have configured Proxima+Nova font for my Angular application

style.css

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');

Attempting to change the root font using bootstrap variables as shown below

$variable-prefix:             bs-;

$font-family-sans-serif:        'proxima-nova', sans-serif;
$font-family-base:            var(--#{$variable-prefix}font-sans-serif);

Upon application load, the default font is coming from the bootstrap core

:root {
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

The variable override is not taking effect

https://i.sstatic.net/xD0FT.png

csstwitter-bootstrapbootstrap-4bootstrap-5

Answer №1

The solution to my problem was ensuring that the bootstrap.min.css file is provided before the style.scss file in the angular.json file

"styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"],

style.scss

@import "../scss/theme.scss";

theme.scss

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here
@import "./custom_variables.scss";

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

custom variable

$variable-prefix:             bs-;

 $font-family-sans-serif:        'proxima-nova', sans-serif;
 $font-family-base:            var(--#{$variable-prefix}font-sans-serif);

Answer №2

There are a few issues that need to be addressed.

  1. The font-family is set as proxima-nova, however, after checking here, it should actually be Proxima Nova. Make sure to use the correct name.

  2. Currently, only the SCSS variable (with $) is being updated, while the CSS variable (with --) is not being updated. Since $font-family-sans-serif is not being utilized in the example, it will not have any effect as it is simply defined.

If you want to change the base font to sans serif, you can update the SCSS variable within the CSS variable like this:

:root {
 --bs-font-sans-serif: $font-family-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

If you prefer not to use a variable, you can simply add "Proxima Nova" directly.

I haven't worked with bootstrap in a while, but CSS + SCSS are my main focus. This is untested and unchecked.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulty in aligning Grid elements in Material UI version 5

Strange enough, the MUI5 Grid is displaying unexpected spacing behavior. Instead of providing proper spacing between items and containers, it seems to be causing them to overlap. To see a live example, visit: https://codesandbox.io/s/green-worker-z44vds? ...

cssreactjsmaterial-uigrid

Creating stylistic layouts for text using CSS

After spending the last hour designing a web page, I am stuck on a particular issue that I just can't seem to solve. I need to write several paragraphs while adhering to two specific constraints: 1) The div in which the text resides must be centered ...

htmlcss

Is it possible for CSS to prevent the insertion of spaces?

When filling out a form, I am able to insert spaces in inputs but not in the textarea (which is necessary). Interestingly, inserting spaces in the textarea works flawlessly. <form action="/#wpcf7-f519-o1" method="post" class="wpcf7-form" enctype="mu ...

javascriptjqueryhtmlcsswordpress

Why are you leaving a trail of timestamps in your .css files?

Within certain source codes, I have observed the following: <link rel="stylesheet" href="/css/style.css?201007071609" type="text/css" /> This prompts my question: What is the purpose behind appending 201007071609 to style.css in the code snippet ab ...

csstime

Enhance the appearance of your image by adding a stylish frame or border without altering its

Is there a way to add a frame to an image without causing it to shrink due to borders? Below is the code I have tried using: .img-border { height: 100%; width: 100%; position: absolute; z-index: 1; } <div class="border border-black i ...

htmlcssimageframe

Guide on implementing page styles to a polymer element

To apply styles from a 'normal' stylesheet to my polymer component, I included shim-shadowdom in the style and added /deep/ to the class. Here is an example: <html> <head> <style shim-shadowdom> .mylink /deep/ {col ...

htmlcsspolymer

Sass encountered an issue when trying to import using the "~" symbol from the node_modules directory

I am currently developing a single-page web application using Angular 6, and I recently integrated the ngx-toast library into my project. However, I encountered an issue when trying to load the libraries by adding the following Sass code with the "~" symb ...

cssangularsass

Organize three image links side by side using HTML layout

Hello there! I'm currently working on a website project and I'm struggling with arranging some image links in a specific layout. The grey rectangles you see represent where the images should be placed, all of them are uniform in size (275 x 186) ...

csshtml

Do designers often manually adjust elements using media queries when working with Bootstrap?

Is it common practice to directly invoke media queries in order to manually adjust the layout of elements when using Bootstrap? In other words, if I have a custom element that I need to display or position in a specific way, is it acceptable to call the m ...

htmlcsstwitter-bootstrapmedia-queries

Tips and tricks for ensuring images maintain their aspect ratio and height when resizing for responsiveness

I am facing an issue with my two-column layout. One column contains an image and the other column has text and buttons with a fixed height. To ensure the image is responsive, I have set the width to 100% and height to auto. However, upon resizing, the aspe ...

htmlcssresponsive-design

The JQuery CSS function is unable to alter the height of the element

I am working with a grid that contains various elements, each with the class item. When I click on one of these elements, I toggle the class expand to resize the element. <body> <div class="grid"> <a href="#"> < ...

javascriptjqueryhtmlcssheight

How can I design an SVG page similar to Coin360 and Market Maps?

I need to design a homepage similar to coin360.com, where I can display market maps and cryptocurrency rates. This page will be created using SVG elements for the answers section. Is there a pre-made template available for this design, or can someone gui ...

javascripthtmlcsssvgsections

Thymeleaf: Automating the Adjustment of Content Fragments

In my project using Spring MVC and Thymeleaf, there is a default fragment that sets up the page structure. Here's what it looks like: <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/ ...

csshtmlthymeleaf

The Bootstrap/Angular tab list items are generated dynamically based on the API response, leading to issues with the DOM

In one of my Angular templates, I have the following snippet. It consists of Bootstrap 3 tabs, but the tab list items (links) are generated dynamically after receiving a response from the API. <ul class="nav nav-tabs pull-right" role="tablist"> &l ...

javascriptjqueryangularjstwitter-bootstrap

Notification (jQuery) failing to display user messages

Is there a way to retrieve the post title and display it in a notification? The notification's title is extracted from a form and shown in the notification. When the user clicks the submit button, the system captures the duration and title, displaying ...

jqueryhtmlcss

The carousel top position in Bootstrap 4 is not functioning properly

I am struggling to get the teal rectangle to move to the top of the carousel. I have set my carousel to have a position relative and my teal rectangle to have a position absolute with top="0", but it doesn't seem to be working properly. Instead of mov ...

cssbootstrap-4

Reordering the stacking order of Grid Items in material-ui

I'm facing an issue with the stacking order of grid items when the browser shrinks. On a regular desktop screen (lg): --------------------------------------------- | col 1 | col 2 | col 3 | --------------------------------------- ...

cssreactjslayoutgridmaterial-ui

After filling out the form, the user's entered information is instantly shown on the same page

I want to create a form where my friend can input information that will be displayed on the same page. For example, when he enters the title in a text field and clicks submit, it should appear in the title box. Additionally, he should be able to enter va ...

jqueryhtmlcssajax

The application of document.body.style.backgroundColor is not compatible with an external CSS style sheet

Why does document.body.style.backgroundColor not work with an external CSS style sheet? I have the following CSS: body { background-color: red; } In my css style sheet, when I use JavaScript alert alert(document.body.style.backgroundColor);, it sh ...

javascripthtmlcss

Easy Peasy CSS Placement

Struggling with CSS and in desperate need of assistance. I've provided my code attempts along with pictures showing what I currently have versus the desired outcome. HTML <div class="thumbposter"><img src="http://tipmypicks.com/cssmovie ...

htmlcss