troubleshooting Question

Custom Font Question: How Can I Serve My Own Font(s)?

Avatar of Tessando
TessandoFlag for United States of America asked on
Fonts TypographyWeb DevelopmentCSSHTMLGoogle
17 Comments1 Solution109 ViewsLast Modified:
I need to have a custom font (called "EarthOrbiter") be a header tag font in some HTML for a record release website.

EarthOrbiter isn't part of Google Fonts, so I'm attempting to serve my own WOFF. I'm using this in the CSS:

@font-face {
  font-family: 'earth';
  src: url(assets/fonts/earthorbiter.woff);
  font-style: normal;
}

h9, .h9 {
font-family:earth;
  font-size: 42px;
  line-height: 1.285;
  font-weight: 300;
  margin-bottom: 20px;
  letter-spacing: -0.036em;
}

And then calling the h9 tag in HTML:

<h9 class="ae-1 fromLeft">LISTEN CLOSELY</h9>

Here's a screenshot showing both (CSS on top and HTML below). Can anyone tell me what I'm doing incorrectly?

Thanks for the assist!

Experts-Exchange-Custom-Font-Questio.png
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 17 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 17 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros