1 year ago
#332061
ljaskolka
CSS Import Font doesn’t work on live server but works on jsfiddle
I’m trying to import custom font on my web page but I see no change on live server, when I’m trying my code on jsfiddle everything works perfectly. I was trying to disable cache but it doesn’t work also.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="">
<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>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" href="#">Remember<span>That</span></a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Close Navigation">
<ul class="primary-nav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
<ul class="secondary-nav">
<li><a href="#">Contact</a></li>
<li class="go-premium-cta"><a href="#">Go Premiuim</a></li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="cointaner">
<div class="left-col">
<p class="subhead">It's Nitty & Gritty</p>
<h1>A Task App That Doesn't Stink</h1>
<div class="hero-cta">
<a href="#" class="primary-cta">Try for free</a>
<a href="#" class="watch-video-cta">
<img src="images/watch.svg" alt="Watch a video">Watch a video
</a>
</div>
</div>
<img src="images/illustration.svg" class="hero-img" alt="Illustration">
</div>
</section>
<section class="features-section">
<div class="container">
<ul>
<li>Unlimited Tasks</li>
<li>SMS Task Reminders</li>
<li>Confetti Explosions upon Task Completions</li>
<li>Real Time Collaboration</li>
<li>Other awesome features</li>
</ul>
<img src="images/holding-phone.jpg" alt="Man holding phone">
</div>
</section>
<section class="testimonials-section">
<div class="container">
<ul>
<li>
<img src="images/person.jpg" alt="Person">
<blockquote>"Lorem ipsum"</blockquote>
<cite>- Jane Doe</cite>
</li>
<li>
<img src="images/person.jpg" alt="Person">
<blockquote>"Lorem ipsum"</blockquote>
<cite>- Jane Doe</cite>
</li>
<li>
<img src="images/person.jpg" alt="Person">
<blockquote>"Lorem ipsum"</blockquote>
<cite>- Jane Doe</cite>
</li>
</ul>
</div>
</section>
<section class="contact-sesion">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="Send message">
</form>
</div>
<div class="contact-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d39266.193138783136!2d15.065798207389161!3d52.0408164098161!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470637afdce9dd61%3A0x56bc8ba3e28c3293!2s66-600%20Krosno%20Odrza%C5%84skie!5e0!3m2!1spl!2spl!4v1647988503628!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</section>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
body {
background: #F2F2F2;
margin: 0;
font-family: 'Poppins', sans-serif; !important;
}
.navbar {
background: white;
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 1.2em;
}
I tried:
- changing browsers
- adding !important
- changing font
- adding font from local
- deleting cache
html
css
import
fonts
font-face
0 Answers
Your Answer