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

Html – h2 won't change font/turning invisible when using two different custom fonts

h2 won’t change font when attempting to change it to art dystopia to match the header. i looked it up online and it said adding !important would help, but it just turns it invisble. i tried moving jolly lodger from the body CSS to the separate paragraph1 and paragraph2 tags, but that doesn’t help either.

body {
    background: url(https://64.media.tumblr.com/998b664cb9fd89a155b3b105dbdc9a09/808262fefad64e38-9c/s500x750/5f09d008c448b11092d119bf69d0751e08d79631.gif);
    background-size: cover;
    color: gray;
}

figcaption {
    color: gray;
    font-size: 40px;
    font: italic bold large Times New Roman;
    margin-right: 350px;
    margin-bottom: -30px;
    font-size: 20px;
    -webkit-text-stroke: 1px black;
}

main {
    width: 700px;
    padding: 50px;
    margin-top: 10px;
    border-radius: 25px;
    background: url(https://64.media.tumblr.com/3eb3a0cfd36a1c89606ecbc5364b342a/9ed37a3660fcc25d-7a/s1280x1920/9e6cd20a45ee6f5d53ccf37266b9cfede1bb33ae.jpg);
    background-position: left top;
    background-repeat: repeat;
}

h1 {
    margin-top: 75px;
    margin-bottom: -20px;
    font-size: 50px;
    font-family: "Art Dystopia";
    color: white;
}

h2 {
    font-size: 40px;
    font-family: "Art Dystopia";
    color: white
}

p {
    font-size: 22.3px;
}

.paragraph1 {
    -webkit-text-stroke: 1px black;
    text-align: right;
    margin-bottom: 20px;
    font-family: "Jolly Lodger", serif;
}

.paragraph2 {
    text-align: center;
    -webkit-text-stroke: 1px black;
    font-family: "Jolly Lodger", serif;
}

img {
    margin-left: -20px;
    margin-right: auto;
    margin-bottom: -20px;
    margin-top: -120px;
    display: block;
}

.divider {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -5;
    margin-top: 30px;
    width: 400px;
    display: block;
}
<html>
   <head>
      <link href="https://fonts.cdnfonts.com/css/art-dystopia" rel="stylesheet">
      <style>
   </head>
   </style>
   <body>
      <div id="banner">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jolly+Lodger">
         <style>
            body {
            }
         </style>
         <center>
         <figure>
            <h1>TOMBROT</h1>
            <figcaption>welcome to the webpage of...</figcaption>
         </figure>
         <main>
            <p class="paragraph1">
               hi there, welcome to the internet mausoleum.
               <br>
               it may be cold and dark, but i hope you are able to enjoy your stay nonetheless.
            </p>
            <img src="https://files.catbox.moe/aezv2r.gif">
            <img src="https://64.media.tumblr.com/b8a2b38e67cbb806e22cdbb1af5064e8/65964bf138f6b00c-d2/s2048x3072/ec10b4718c3caeed50d40e45014f6ece8aa3f9e3.pnj" class="divider">
            <p class="paragraph2">
               i've been wanting to have my own website for a while now. as someone who is interested in making online friends (and tends to be averse to public social media usage), i hope this can be an outlet to do such while also displaying my own personality and creativity. have fun peeking around!
            </p>
            <h2>news</h2>
         </main>
      </div>
   </body>
Tags:

2

Answers


  1. 0

    The font you have chosen doesn’t have any lowercase letters.

    If you change news to NEWS. It will show.

    Login or Signup to reply.
  2. 0

    Your html code is outdated. head tag and style tags are closing abruptly.

    You are adding style in body tag. You are using two different fonts from google with two different links, it can be done by one link only.

    Also, your font short-code is also messed up.

    I would recommend to go through html and css.

    body {
  background: url(https://64.media.tumblr.com/998b664cb9fd89a155b3b105dbdc9a09/808262fefad64e38-9c/s500x750/5f09d008c448b11092d119bf69d0751e08d79631.gif);
  background-size: cover;
  color: gray;
}

section {
  text-align: center;
}

figcaption {
  color: gray;
  font: italic bold 40px 'Times New Roman', serif;
  margin-right: 350px;
  margin-bottom: -30px;
  -webkit-text-stroke: 1px black;
}

main {
  width: 700px;
  padding: 50px;
  margin-top: 10px;
  border-radius: 25px;
  background: url(https://64.media.tumblr.com/3eb3a0cfd36a1c89606ecbc5364b342a/9ed37a3660fcc25d-7a/s1280x1920/9e6cd20a45ee6f5d53ccf37266b9cfede1bb33ae.jpg);
  background-position: left top;
  background-repeat: repeat;
}

h1 {
  margin-top: 75px;
  margin-bottom: -20px;
  font-size: 50px;
  font-family: "art-dystopia";
  color: white;
}

h2 {
  font-size: 40px;
  font-family: "art-dystopia";
  color: white
}

p {
  font-size: 22.3px;
}

.paragraph1 {
  -webkit-text-stroke: 1px black;
  text-align: right;
  margin-bottom: 20px;
  font-family: "Jolly Lodger", serif;
}

.paragraph2 {
  text-align: center;
  -webkit-text-stroke: 1px black;
  font-family: "Jolly Lodger", serif;
}

img {
  margin-left: -20px;
  margin-right: auto;
  margin-bottom: -20px;
  margin-top: -120px;
  display: block;
}

.divider {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -5;
  margin-top: 30px;
  width: 400px;
  display: block;
}
    <link href="https://fonts.cdnfonts.com/css/art-dystopia" rel="stylesheet">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jolly+Lodger">
<div id="banner">
  <section>
    <figure>
      <h1>TOMBROT</h1>
      <figcaption>welcome to the webpage of...</figcaption>
    </figure>
    <main>
      <p class="paragraph1">
        hi there, welcome to the internet mausoleum.
        <br> it may be cold and dark, but i hope you are able to enjoy your stay nonetheless.
      </p>
      <img src="https://files.catbox.moe/aezv2r.gif">
      <img src="https://64.media.tumblr.com/b8a2b38e67cbb806e22cdbb1af5064e8/65964bf138f6b00c-d2/s2048x3072/ec10b4718c3caeed50d40e45014f6ece8aa3f9e3.pnj" class="divider">
      <p class="paragraph2">
        i've been wanting to have my own website for a while now. as someone who is interested in making online friends (and tends to be averse to public social media usage), i hope this can be an outlet to do such while also displaying my own personality and
        creativity. have fun peeking around!
      </p>
      <h2>news</h2>
    </main>
  </section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search