Adjusting the "lang" attribute to modify the font style

By using the HTML lang attribute and setting it to "en", I noticed that some of the div fonts and colors were changing to the default ones in Bootstrap. Although I am utilizing the Bliss2 Regular font, the default font style seems to be taking precedence.

.cc-revoke, .cc-window {
position: fixed;
overflow: hidden;
box-sizing: border-box;
**font-family: Helvetica,Calibri,Arial,sans-serif;**
font-size: 16px;
line-height: 1.5em;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
z-index: 9999;
}

Below is an excerpt from my code:

.cc-window {
**font-family: "Bliss Regular";**
font-size: 16px;
text-align: center;
}

I'm curious as to why this issue is occurring and how I can go about resolving it. It seems to only affect certain parts of the design.

Answer №1

In order to overwrite certain styles, consider including !important at the end:

font-size : 16px !important ;

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 method for adding a line break in the body of an email when we include the recipient, subject, and message?

Do you have a requirement where information needs to be sent to an end user via Gmail (preferred) and they need to click on a button in the email body to respond? The button response is set up with predefined to, subject, and body fields, but there are dif ...

Achieving consistent height for Bootstrap grid rows with the class h-25

I'm struggling to create a Bootstrap grid that functions like a traditional table with fixed row heights. I've attempted using the h-25 class on each row and overflow-auto on the parent container, but no matter how I adjust the values, it doesn&a ...

Tips for separating the 'title' and 'icon' elements within Bootstrap panels?

I am currently working on integrating a FAQ section into my website (not yet live, so I cannot provide a link). However, I am facing some minor CSS issues that I am struggling to resolve. The problem lies in a panel that is meant to display as shown below: ...

Ways to avoid single-sided border from overlapping with border radius

When adding a 2px bottom border to a text field with a 4px corner radius on the container, the border tends to curl around the edge due to the larger radius. I am looking for a solution to keep the bottom edge flat. [What I DON'T want: border wrappin ...

Is there a way to alter the text color upon touching it?

I'm attempting to modify the background color of a button and also change the text color inside the button. While I was successful in changing the button's color, the text color remained the same. Even after adding a hover effect to the text, the ...

Are Your Padding Styles Missing?

I've noticed that the text under the photos on this page in the main section (a.event) is not displaying the 5px padding top and bottom. Any suggestions for fixing this? Thank you! =) a.event { width:315px; height:auto; border:0; padding: 5px 0; } ...

Learn how to create a PHP activity feed that functions like Facebook, and discover the best methods for converting JSON responses into HTML

We are currently working on a website that functions similarly to Facebook, specifically focusing on the activity feed. To load the user's activity feed, we use AJAX to send a request to a PHP file which then processes the logic and returns the values ...

What is the best method for centering text input within an Angular Material toolbar?

Can anyone help me with aligning input elements with buttons on an Angular Material toolbar? Check out the code pen: http://codepen.io/curtwagner1984/pen/amgdXj Here is the HTML code: <md-toolbar class="md-hue-1" layout-align="start center" style="mi ...

Learn the process of transferring information through ajax while managing dependent drop-down menus

I have successfully set the initial value from the first combo-box and now I am looking to send the second variable from the second combo-box and receive it in the same PHP file. Below is the Ajax code snippet: $(document).ready(function(){ $(".rutas") ...

The functionality of the controls is not functioning properly when attempting to play a video after clicking on an image in HTML5

While working with two HTML5 videos, I encountered an issue with the play/pause functionality. Despite writing Javascript code to control this, clicking on one video's poster sometimes results in the other video playing instead. This inconsistency is ...

Learn how to render a dynamic checkbox that is connected with AJAX and PHP for seamless functionality

I need to showcase a dynamic checkbox that can be bound using ajax and php. Here is my code: <?php include 'dbconnect.php'; $result = mysqli_query($link, "SELECT * FROM city where district_id='$dist' "); while($city_row=mysqli_fe ...

The CSS list formatting does not seem to be compatible with Bootstrap 4

For my website, I am working on creating a table using the list method along with CSS. However, I encountered a problem where the table is not displaying correctly when Bootstrap CDN is applied. Removing Bootstrap CDN resolves the issue, but I need to keep ...

Expand a section of the background picture

I am working with an image that contains multiple flag images: https://i.stack.imgur.com/xg0iM.jpg I have a div element with the dimensions: width:100px; height:50px. My goal is to resize each flag to fit inside it: .flag{ wi ...

Guide on triggering an open modal when clicking a link using jQuery

Creating a modal popup has always been my goal. After designing the CSS to style it, I found myself stuck as I lack knowledge in JQuery or JavaScript to code the functionality that animates and opens the modal upon clicking a button or link. Despite search ...

The cursor remains positioned below the video within the designated div

I'm currently facing an issue in a project where the cursor div I created stays underneath the video element. No matter what I do, I can't seem to bring it to the front. Even setting a z-index on the video tag hasn't helped. Can someone plea ...

Preventing empty submissions through contact form validation

While I'm not well-versed in php/js, I'm currently attempting to create a custom contact form within Wordpress. After following various tutorials and researching extensively, I have successfully configured the form to send its contents to my emai ...

The paragraph text should dynamically update upon clicking a button based on JavaScript code, however, the text remains unchanged despite attempts to modify it

I recently started learning JavaScript and wanted to update the content of a paragraph when a button is clicked. However, I encountered an issue where this functionality doesn't seem to work. <body> <p id="paragraph">Change Text on cl ...

Ways to Create a Text Overlay on an Image for your Banner

I have a banner div element with an image overlapping it. I'm trying to display my text without it being covered by the image, but I'm facing some challenges. Here's a visual example of the issue: https://i.stack.imgur.com/JdW75.png This ...

Creating a navbar that sticks to the top of the page

I've been working on some code to create a sticky navbar that remains fixed as I scroll down, but unfortunately, it's not working. I suspect the issue might lie in the CSS, as the HTML and javascript seem fine. Interestingly, this same code has w ...

jQuery tooltips experiencing lag or duplication when closing on adjacent elements

My tool tips are not disappearing correctly, specifically in IE where they lag after you move to the next element. Using jQuery: $(document).ready(function() { loadMap(x, y,z); $(document).tooltip({ at: 'center top', my: ...