I want to add the code from this site to my project: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_image
After adding it to my project the code works as it should but for some reason it keeps overriding the font style that I have in the project. I tried removing the code and my font style went back to normal the way I want it to be. So, I know the problem is definitely the code I'm copying from w3schools.
I don't have any other font styles specified so I don't understand why me using the code is causing a change in font style. Is someone able to explain what's causing the problem? Here is my code:
* {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
color: #4d5562;
}
span {
font-weight: 600;
}
h1 {
font-weight: bold;
}
a {
display: inline-block;
margin: 0px 10px;
}<link rel="icon" type="image/x-icon" href="/Images/favicon.png">
<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Poppins -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- W3Schools -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- PROCESS -->
<div class="process bg-pink-200 mx-auto px-48 pb-10">
<h3 class="text-pink-500 font-semibold mt-20 mb-4 pt-10">PROCESS </h3>
<h2 class="text-2xl font-medium text-gray-900 pb-2">Ok, but how did I actually get there?</h2>
<div class="w3-container">
<img src="Images/crmprocess.png" style="width:90%;cursor:zoom-in" onclick="document.getElementById('modal01').style.display='block'">
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-button w3-hover-red w3-xlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom">
<img src="Images/crmprocess.png" style="width:100%">
</div>
</div>
</div>
</div>I have used developer tools and noticed w3schools is importing another font and if I uncheck it for all header tags it fixes my problem. But what I don't understand is if I'm already specifying I want the Poppins font by using * which includes everything, why is it still overriding my font?
Here is a screenshot of what I unchecked in dev tools: 