Question 369016 in Html Question posted in
Some basic documentation can be found here.

Html – Oswald font won't appear (apparently can only do 2 fonts) css

So I wanted the intro class to have the oswald font but it didnt work, I also attempted to use bebas but it also didnt work, Im starting to believe that CSS only allows 2 fonts, is it true? If so, how should I bypass this rule?

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--poppins);
}

:root {
    --bright-green: #cad18a;
    --green: #939e65;
    --poppins: "Poppins", sans-serif;
    --gloock: "Gloock", serif;
    --oswald: "Oswald", sans-serif;
}

.hero {
    background-image: url(./content/pexels-markus-spiske-3039036.jpg);
    height: 500px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-bottom: 7px solid var(--green);
    
}

.nav-parent{
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
    height: 90px;
    
    
}


.nav-wrapper {
    padding: 1rem 0 0 0 ;
    margin:0 3rem 0 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.menu {
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
    
}

.logo, .menu * {
    text-decoration: none;
    color: white;
    filter: brightness(100%);
    
}

.logo {
    font-weight: 600;
    font-size: 1.6rem;
    color: #cad18a;
}

.menu {
    font-size: 1.1rem;
}

.menu *:hover{
    text-decoration: underline var(--bright-green);
    text-underline-offset: 5px;
}

.hero-child {
    background: rgb(0,0,0);
background: linear-gradient(94deg, rgba(0,0,0,0.729341736694678) 0%, rgba(15,26,57,0.35959383753501406) 55%, rgba(36,64,138,0) 100%);
    height: 500px;
}

.inside {
    color: white;
    margin:0 3rem 0 3rem;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    height: 300px;
}

.inside *{
    font-family: var(--gloock);
}

.content {
    margin: 1rem 3rem 0 3rem;
}

.intro {
    font-size: var(--oswald);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <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=Gloock&family=Oswald:[email protected]&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
    <main class="hero">
        <main class="hero-child">
            <div class="nav-parent">
                <div class="nav-wrapper">
                    <a href="/" class="logo">Frondo</a>
                    <div class="menu">
                        <a href="/" class="home">Home</a>
                        <a href="/blog.html" class="blog">Blog</a>
                        <a href="/merch.html" class="merch">Merch</a>
                        <a href="/about-us.html" class="about-us">About Us</a>
                    </div>
                </div>
            </div>
        <div class="inside">
            <p class="desc">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis tenetur id qui? Necessitatibus aliquid assumenda reprehenderit aliquam corporis. Eligendi voluptatum laborum numquam, dolore omnis nemo sunt ea est earum saepe!
            </p>
        </main>
    
    </main>

    <main class="content">
        <h1 class="intro">
            Get to know Castro!
        </h1>
    </main>
</body>
</html>

I’ve also tried to import the fonts through css but again, it still wouldnt work.

Tags:

2

Answers


  1. 0

    Try the

    @font face {
   url:
   font-weight:
   font-name:
 }

    idk if i wrote it right by something like this , once you type @font-face and click enter VS code will write it for you , and link to your font , and it should work!

    Login or Signup to reply.
  2. 0

    Have you tried adding font via your CSS file?

    Check this out:

    @import url("https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap");

body {
  font-family: "Oswald", sans-serif;
  font-style: normal;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search