Variation in typefaces within indistinguishable settings

I am facing an issue with two different installations of Laravel that include Bootstrap.

Both installations seem to have Montserrat on the body tag.

In one installation, Montserrat is included with Bootstrap directly and does not need a declaration in the app.sass file.

However, in the other installation, Montserrat needs to be declared in order to prevent it from defaulting to the browser's font.

Even though both installations have the same Montserrat @import, they appear different. I suspect that the incorrect one is actually Montserrat, while the correct one may be some form of Bootstrap styling that the other lacks.

To see the difference, please visit:

Desired effect: Click here and log in with 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d000c1504000401040c03430f081f0f080e050801021b2d0a000c0401430e0200">[email protected]</a>
and 123456, then click again. The text is in Cyrillic, but it should not affect the test.

Problematic effect: Visit this link - no login required.

I have added a font-family declaration in the sass file (the desired one does not have this), as without it the font defaults to the browser's default.

csslaravelfontsbootstrap-4

Answer №1

To make your font stand out, simply add !important after the font-family declaration like this.

body {
    margin: 0;
    padding: 0 0 50px 0;
    min-height: 100vh;
    font-family: "Montserrat", sans-serif!important;
    background-image: linear-gradient(45deg, #1de099, #1dc8cd);
}
.navbar-brand {
    letter-spacing: 3px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 2.1rem;
}

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 place text on top of an element with a background opacity of 0

.c{ display: flex; padding-top: 18em; .backgroundDiv{ background: url("/images/DSC8253.png"); background-repeat: no-repeat; background-size: cover; background-position: center center ; height: 20em; ...

htmlcssopacity

Adjusting the size of a v-image in Vuetify to perfectly fit the screen dimension

I have a photo gallery on my Vue page, and when a photo is selected, a dialog pops up by setting the selectedCard. However, the image does not fit the size of the screen and only half of it is visible. I have tried setting the CSS with max height or widt ...

cssvue.js

A full-width CSS menu featuring dropdowns beneath each entry for easy navigation

Check out the JSFiddle here I've created a full-width CSS menu that spans the entire screen, but I'm struggling to figure out how to make the corresponding subnav items appear below their parent items. Is it even possible to achieve this design ...

htmlcss

Troubleshooting problem with infinite scrolling in AngularJS with Ionic framework

I recently created a webpage with an infinite scroll page load more script using Ionic AngularJS. However, I encountered an issue where the page restarts from the beginning once it reaches the bottom. Below is the HTML code snippet: <ion-content class ...

javascriptjqueryhtmlcssangularjs

The fixed sidebar refuses to pause before reaching the footer

I am facing an issue while building my blog. I am trying to figure out how to make my sidebar widget sticky and stop scrolling before reaching the #footer section. My widget is overlapping my footer and it would be really helpful if someone could assist m ...

javascriptjqueryhtmlcss

AngularJS Material Design sticky header MD table container

I am looking to create a table container to display records with a unique requirement - when the table reaches the top of the screen, its header should stick in place. Can you provide guidance on how to implement this feature? For reference, please check ...

javascriptcssangularjsmaterial-designangular-material

Is there a way to resolve issues with the "display class" and "grid classes"?

I am currently working on an album project using Bootstrap 'Cards'. Two specific tasks I am trying to accomplish are: 1) Ensuring that the cards expand to the full width on small screens using col-sm-12? 2) Hiding a specific element on small ...

bootstrap-4

concealing the dropdown in React upon clicking outside of it

I have been delving into learning React by challenging myself with a React problem. The code challenge I'm facing involves trying to close a drop-down when clicking outside of it. Despite my efforts to debug, I haven't had much luck in solving th ...

javascripthtmlcssreactjsreact-hooks

What's causing these flex items to not wrap around properly?

I'm facing an issue with a flex item that also acts as a flex container, .sub-con. The problem is that the flex item within .sub-con is not wrapping even after applying flex-flow: row wrap. Is there anyone who can help me resolve this problem or iden ...

htmlcssflexboxword-wrap

Refreshing JWT Tokens in Laravel-Vue App

I've implemented the jwtAuth package by Tymon to manage authentication between my Laravel backend and Vue front end SPA. I've created an AuthController based on the documentation with minor modifications to suit my requirements, and everything is ...

laravelvue.jsjwt

Looking to switch up the hide/show toggle animation?

Currently, I have a functioning element with the following code. It involves an object named #obj1 that remains hidden upon page load but becomes visible when #obj2 is clicked. #obj1{ position:fixed; width:100px; bottom:180px; right:10 ...

javascriptjquerycss

Using JavaScript to place image data on the canvas in an overlay fashion

I recently wrote the code below to generate a rectangle on a canvas: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canv ...

javascripthtmlcsshtml5-canvas

Having trouble converting a date and time to a Carbon instance in Laravel 5.5

I am attempting to generate a Carbon instance using different variables for $date and $time. The code I am currently using is as follows: $user->created_at = \Carbon\Carbon::parse($entry->Date." ".$entry->Time); However, I am encounter ...

phplaraveldatetimephp-carbon

Struggling to Make Text Overlay Transparent and Slide Only to the Right

Can someone help me make my image have an opaque overlay with text that slides only right when hovered over? Currently, it's sliding both right and up. Any suggestions on how to fix this issue would be greatly appreciated. Thank you. html, body{ ...

htmlcss

Implementing Dynamic CSS Styles in AngularJS

Essentially, I am facing a challenge on my page where a control needs to toggle two different elements with two distinct CSS classes upon being clicked. While I have successfully managed to toggle one of the controls, the other remains unchanged. Here is ...

javascripthtmlcssangularjs

Issue with writing/opening logs in Laravel 5.2 on a daily basis

Logging is enabled in controllers, Scheduler, and artisan commands with daily log rotation configured in the Laravel 5.2 config. The issue arises when logs created by one source (controller, artisan, or scheduler) are not accessible to the others. A prope ...

phplaravellaravel-5

What is causing the discrepancy in functionality between these two HTML/CSS files with identical code?

In this codepen, you'll find the first example: Subpar Pen: https://codepen.io/anon/pen/jGpxrp Additionally, here is the code for the second example: Excellent Pen: https://codepen.io/anon/pen/QqBmWK?editors=1100 I'm puzzled why the buttons l ...

javascripthtmlcss

CSS - Is there a way to alter the arrangement of DIVs depending on the size of the screen?

My inquiry pertains to a CSS layout. I currently have 3 divs positioned in a horizontal line next to each other, as depicted below... div1 div2 div3 I am aiming for the divs to reorganize themselves as the screen size decreases. In one scenario, they sho ...

htmlcsslayoutalignment

Select2 input field not receiving focus when navigating by tab key

When attempting to tab through the fields, I encounter an issue where the fields do not highlight as expected. Despite trying various solutions, such as the following CSS code: .select2-selection__rendered:focus { outline: none !important; box-shadow: ...

cssbootstrap-4accessibilityjquery-select2

Error 400: Vue CLI and Laravel API not playing nice

I am currently working on developing an application utilizing Vue CLI and Laravel API. However, I have encountered an issue with receiving the token response from the Laravel API. Interestingly, when testing with Postman, everything functions properly htt ...

phplaravelvue.js