Hey there, I'm a newcomer around here and I could use some help with my post. It might not be perfect, but any guidance you can offer would be appreciated.
The issue I'm facing is that I'm having trouble getting the font I downloaded or linked to work, both for my h1 font and body text.
I specifically want to use PressGothic for the h1, but if that doesn't work, I'll settle for Anton.
I've experimented with a few different approaches:
- I tried linking the downloaded font files using @font-face
- I attempted to call the font using @import url in the CSS and later in the file with font-family, even using "!important" to force it.
After numerous tries, only Oswald seems to work in the body (specifically in the footer).
Is there a solution that doesn't involve customizing bootstrap? I won't be continuing with this project, and I'd prefer not to have the other person redo the bootstrap file. Plus, I'd like to learn from this experience to improve for next time.
Thank you!
@font-face {
font-family: 'Exo';
src: url('assets/fonts/Exo-VariableFont_wght.ttf');
}
@font-face {
font-family: 'PressGothic';
src: url('assets/fonts/PressGothicPro.ttf') format('truetype');
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
body {
background: black;
color: white;
font-family: 'Oswald', sans-serif;
}
h1 {
text-transform: uppercase;
font-size: 5rem;
font-family: 'Anton', sans-serif !important;
}
p {
font-family: 'Montserrat', sans-serif;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4c4a5948780d160a160b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body id="page-top">
<header class="text-white">
<div class="container px-4 text-center">
<h1>title</h1>
<p>
test font
</p>
</header>
<footer class="py-5 bg-dark">
<div class="container px-4">
<p class="m-0 text-center text-white">
copyright
<a class="text-light" href="assets/doc/qr-code.pdf">
doc test</a
>
</p>
</div>
</footer>