I have encountered an issue while working on my landing page. I am using Google fonts for the design and trying to integrate Bootstrap as well. However, whenever I add the Bootstrap link, all the font styles stop working. I have checked the order of the CSS links and even tried different versions of Bootstrap links, but nothing seems to solve the problem. Can someone provide me with some guidance or assistance?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Burger</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- ^^^ THIS IS THE CDN THAT CAUSES THE ISSUE ^^^ -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="homepage">
<div class="overlay">
<img src="photo-1571091718767-18b5b1457add.jpg" alt="" class="bgimg1">
</div>
<ul class="navbar">
<a href=""><li><i class="fas fa-hamburger logo"></i></li></a>
<a href=""><li>Home</li></a>
<a href=""><li>Choices</li></a>
<a href=""><li>Contact</li></a>
</ul>
<div class="textcont">
<div class="toptext"><h3>THE BEST BURGERS</h3></div>
<div class="middletext"><h1>Meals You Can't Resist</h1></div>
<div class="menubtn">OUR MENU</div>
</div>
</div>
<!-- Rest of the HTML code remains unchanged -->
CSS
*{
padding: 0;
margin: 0;
}
/* Remaining CSS code remains same */