What is the method to replace the default font family in Bootstrap?

Adding my own unique style with CSS

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

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

Using the custom font in HTML

<h4 class="CustomFont-style text-uppercase">Unique Text</h4>

The current console display is as follows, but I aim to replace it with my custom font:

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

Answer №1

Make sure that your CSS link comes after the Bootstrap link so you can easily override it. For example:

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

  </body>
</html>

Answer №2

To use !important, you can override the 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>

However, it is possible to achieve the same result without using !important. You just need to place your custom stylesheet link after the bootstrap links and 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">

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

What is the best way to trigger a filter function that has been stored in a variable?

I need assistance with executing a filter function stored in a variable when the user clicks a button. The function enableFilter must compare item.id with item.category and trigger the filter if they match. Can someone provide guidance on how to achieve ...

javascripthtmlreactjs

How to add HTML line into PHP form in Codeigniter

When using codeigniter to display a registration form, I encountered an issue with the syntax for adding a line that states "By clicking Register, you agree to our Terms." Could you please assist me with correcting the syntax? <?php echo form_open() ...

phphtmlcodeigniter

What could be causing my handle button to slide off the timeline towards the right?

I'm facing an issue with my volume bar component where the slider button is rendering outside of the timeline instead of on top of the progress bar. I need assistance in adjusting its position. // Here is the code for my volume bar component: import ...

javascripthtmlcssruby-on-rails

Updating CSS when input field value changes using jQuery

var emailFooter = $('footer#footer input.email'); var emailFooterLength = emailFooter.val().length; var hiddenCaptcha = $("footer#footer .captcha-hide"); emailFooter.focus( function() { hiddenCaptcha.css("disp ...

javascriptjquerycsshtml

positioning of content on the left, right, and center

My task involves using CSS to adjust the positions of various elements on a webpage. Currently, the right position navigation bar and the liquid layout are working fine, but the positioning of the "content" and "right navigation bar" is not correct. I ai ...

htmlcsspanelnavigationbar

Is there a way to dynamically adjust the carousel slide indicators based on the changing viewport size?

My carousel is inspired by the one at the following link: I am looking to make a modification where, as the screen size decreases, the bottom links disappear and are replaced with dot indicators for switching between slides. ...

javascripthtmlcss

Why are the buttons on my HTML/JavaScript page not functioning properly?

I have been struggling with a code for a 5 image slideshow where the NEXT and PREVIOUS buttons are supposed to take me to the next and previous slides. However, when I press them, nothing happens. Can anyone provide some assistance? I need additional detai ...

javascripthtml

What methods can be used to reveal the URL or string hidden by the current "Search" button?

I am a beginner with no coding experience. Please forgive me if my question sounds silly. I am interested in learning how to "discover" the correct string to add to an existing internal-domain-url (even though I am not the admin of that domain) in order t ...

javascripthtml

CSS Filters and Utilizing Negative Margins

I've been experimenting with placing a div behind another div in the layout of my website. Instead of using "position:absolute," I decided to try negative margins. Everything seemed to be going well until I added some filters. The div in question has ...

htmlcss

What is the best way to expand the Bootstrap container's width to the maximum size?

I'm having an issue with implementing a DataTable within a Bootstrap container. When viewing the website at maximum width, the table container adds a scrollbar and cuts off the last column in the table. Attempted solutions such as using a `container- ...

htmlcsstwitter-bootstrapcontainerscontentsize

Firefox and Internet Explorer do not support CSS transitions

I'm trying to achieve a simple style with the following code: li, a { display: inline-block; } li { transition: top 0.3s; } li:hover { position: relative; top: 3px; } This style is intended to make some icons in a menu sink down ...

csscss-transitions

Iterating through the sorted list in reverse order, retrieving the text of each list item

Is there a way to navigate through an ordered list, extract and return the text based on a scenario where the user clicks on an li element like Cat 1-2? The goal is to concatenate all parent li's text into either a string or an array. If an array is u ...

javascriptjqueryhtml

Unlocking the Possibilities of scroll-snap-type

My goal is to effectively utilize the scroll-snap-type property I'm struggling to understand why this code functions as intended html, body { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start none; border: 3px dashed blac ...

htmlcssscroll

The bootstrap navbar-collapse feature is causing a shift in the orientation of the navigation elements

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar navbar-default" role="nav ...

jqueryhtmlcsstwitter-bootstrap

Show a component when there is no input value, then conceal it when an input value is present

Recently, I attempted to position a paragraph absolutely in relation to an input element. My goal is to conceal the paragraph when the input has a value, and reveal it when the input is empty. Here is the code snippet I created, however, it doesn't ...

javascripthtmlcss

The challenge of aligning widgets in bootstrap panels across different browsers

Incorporating angularjs and bootstrap3, I'm in search of the best way to center widgets within a panel and achieve responsive behavior. Interestingly, the results vary across browsers, particularly in Firefox. Within my code, I have 4 column divs str ...

htmlcssangularjstwitter-bootstrapfirefox

Quick method to assign child iframe title as index.html <title>title</title>

Is there a simple method to dynamically update the <title> of my index.html based on the <title> of a child iframe? Take a look at my website for reference If the content within the iframe changes, will the title automatically update along wi ...

javascriptjqueryhtmliframetitle

Troubleshooting IE7's overflow problem

In my website, I have a ul element with overflow-y set to auto for displaying a nice scroll bar with all the li elements. However, in IE7, this setting is ignored and the list overflows outside the container. To see the issue directly, you can visit http: ...

cssoverflowinternet-explorer-7

Eliminating unnecessary whitespace between the bottom of the document and an element

I have a HTML page that when scrolled should limit scroll to the document height. It must not exceed the bottom of an element. Here is a screenshot for better understanding: https://i.stack.imgur.com/RaVg8.jpg The scrolling should be limited after the En ...

javascriptjqueryhtmlcss

Slider for comparing images is currently malfunctioning in Firefox

I recently came across a tutorial on how to create an image comparison slider, and it worked flawlessly on Chrome. However, when I tried to load it on Firefox, the slider didn't respond at all. Below is a snippet of the code: const slider = do ...

javascriptcssslider