I have implemented font-weight into my code. However, the font is still not appearing bold. Please correct me if I have made any mistakes:

/* Installing Fonts */
@font-face {
    font-family: "Rockwell";
    font-style: normal;
    font-weight: bold;
    src: local("☺"), url("https://drive.google.com/uc?export=download&id=1-RIezCq4IiqGvHXHQi4jsa1qlSp4f9mp") format("truetype");
}

/* End of Installing Fonts */

/* Fonts */
h1 {
    font-family: "Rockwell" !important;
    font-size: 20px;
    font-weight: bold;
}
 
h2 {
    font-family: "Rockwell" !important;
    font-weight: bold;
}
 
h3 {
    font-family: "Rockwell" !important;
    font-weight: bold;
    }
 
h4 {
    font-family: "Rockwell" !important;
    font-weight: bold;
    }
 
em {
    font-family: "Rockwell" !important;
    font-weight: bold;
    }
 
.WikiHeader {
    font-family: "Rockwell";
    font-weight: bold;
}

Fandom already sets the headers font-weight through several rules:

.page-header__title { font-weight: 300; } /* = h1 */
.page-content h2,
.page-content h3 { font-weight: 500; }

You have to override these rules. Try something like this:

.page__main h1,
.page__main h2,
.page__main h3 { font-weight: bold; }

So you're saying my full code would look like this?

/* Installing Fonts */
@font-face {
    font-family: "Rockwell";
    font-style: normal;
    font-weight: bold;
    src: local("☺"), url("https://drive.google.com/uc?export=download&id=1-RIezCq4IiqGvHXHQi4jsa1qlSp4f9mp") format("truetype");
}
/* End of Installing Fonts */
/* Fonts */
.page__main h1,
.page__main h2,
.page__main h3 { font-weight: bold; }
}

No. I gave a short answer; you have to keep the font-family declaration.

.page__main h1,
.page__main h2,
.page__main h3,
.page__main h4 {
  font-family: "Rockwell", serif;
  font-weight: bold;
}
.page__main h1 { font-size: 20px; }

The em declaration shoud work as itself - while i'm not sure why you don't use the bold feature (3 apostrophes).

I don't know what is WikiHeader. It sounds like an obsolete class.

@Muchos good news - I changed up my code and now it looks like this. The headers of articles are appearing bold, however, article titles are appearing very small. How can I increase the size (for an idea of how small it is see this page - https://the-wooden-railway-chronicles.fandom.com/wiki/The_Wooden_Railway_Chronicles

/* Installing Fonts */
@font-face {
    font-family: "Rockwell";
    font-style: normal;
    font-weight: 400; /* Normal weight */
    src: local("☺"), url("https://drive.google.com/uc?export=download&id=1-RIezCq4IiqGvHXHQi4jsa1qlSp4f9mp") format("truetype");
}


/* End of Installing Fonts */

/* Fonts */
.page__main h1,
.page__main h2,
.page__main h3,
.page__main h4 {
  font-family: "Rockwell", serif;
  font-weight: bold;
}
.page__main h1 { font-size: 28px; }