Avatar of Tessando
TessandoFlag for United States of America asked on

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

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;
}

Open in new window


And then calling the h9 tag in HTML:

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

Open in new window


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
HTMLGoogleFonts TypographyWeb DevelopmentCSS

Avatar of undefined
Last Comment
Chris Stanyon

8/22/2022 - Mon
John Korchok

The path to the .woff should be in single or double quotes and the format stated explicitly:
src: url("/fonts/OpenSans-Regular-webfont.woff") format("woff");

Open in new window


Scott Fell

You may also need to make sure that your server accepts .woff and .woff2 as a mimetype where both are "application/font-woff".  What you do in practice locally may not work and this will most likely be the fix.
ASKER
Tessando

Thank you, John. That didn't change the font. Below is a screenshot of the change I made to the CSS. Does this look correct to you?


Your help has saved me hundreds of hours of internet surfing.
fblack61
John Korchok

That looks good. Other things to check:
Is assets/fonts a subfolder of the folder holding the page?
Your CSS has both h9 and .h9. h9 is not standard html, you should remove that. Then change the HTML to something like:
<p class="h9 ae-1 fromLeft">LISTEN CLOSELY</p>

Open in new window

ASKER
Tessando

Thanks, guys. I appreciate the quick and clear help.

> Is assets/fonts a sub folder of the folder holding the page?

It certainly is.

I've removed the ".h9" from the CSS and here's how it currently looks:


@Scott mentioned >You may also need to make sure that your server accepts .woff and .woff2 as a mimetype where both are "application/font-woff".  What you do in practice locally may not work and this will most likely be the fix.

Yes, true. This is being statically hosted in S3, so I don't have much control over the Server but being that it's Amazon I bet that the latest file type for fonts works.

Thank you for the suggestions. I appreciate it. There IS a solution somewhere for this, we just haven't found it yet. :-)


John Korchok

The other way around. h9 will not work. As I mentioned, h9 is not standard CSS and your browser will not understand it.
Add the dot in front to change it to a class in CSS. Then declare it in your HTML as a class:
<p class="h9 ae-1 fromLeft">LISTEN CLOSELY</p>

Open in new window


Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Tessando

Ah, got it, @John. Thanks for explaining that. I made the change and still don't see results in my local browser testing.
I then uploaded to S3, invalidated the cache via CloudFront and it's still showing a default font for some reason.

Any other suggestions? Is there perhaps a way to upload a custom font to Google and pull it down? Perhaps I'm thinking too limited here.

I appreciate your advice and guidance.

John Korchok

Sorry, Google? Are you uploading this to Google Docs? They don't support third party fonts, it's Google fonts or nothing.
If I misunderstand, please explain.
ASKER
Tessando

Ah, sorry for the confusion. I found a way to use Google's fonts, for example with this font called "Orbitron", which is close to the Earth Orbiter I need to display.

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">

Open in new window

I thought maybe there was a way to upload a font to Google and have it be used this way, through googleapis.com. But, as you mention, that's not possible to do.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
David Favor

Using a non-standard tag like <h9> (not part of HTML syntax) will work differently in every browser + potentially differently each time the browser version changes.

Many browsers may just treat this as an error + skip any attempt rendering text in this tag.

Switch to using the form John mentions above...

<p class="h9">some text</p>

Open in new window

ASKER
Tessando

Thanks @David. I added the line you mentioned in the method that @John mentions and I'm getting the same result, what I can only presume is the default font (image below).

If something like the header tag of <h9> is non-standard, what is the best practice for adding in a customized font? I'm asking because I simply copied the existing <h1> class from the CSS. In other words, I wanted to test using something non-destructive. I'm sure there's a better way to do it. :-)

John Korchok

The developer tools in FireFox or Chrome can be helpful to diagnose how the browser is interpreting your CSS. FireFox is simpler to use. In that browser, click on the menu icon, then choose Web Developer>Inspector and select the relevant part of your page. At the bottom, you'll see a listing of your HTML, a list of CSS styles, and a window that can show Layout or Computed methods for how the browser is interpreting your page.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Chris Stanyon

Hi Tessando,

I would suggest that you keep your HTML semantic. What I mean by this is that if you're trying to infer a header, then you use a header tag. Technically, you could use a <p> (paragraph) tag and style that, but instead, just use one of the built-in <h*> tags and style that instead. You can do this easily by adding a class to your tag and using that in CSS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>EE // 29181860</title>
        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
        <style>
            .myHeader {
                font-family: 'Orbitron';
                font-size: 42px;
                line-height: 1.285rem;
                margin-bottom: 20px;
            }
        </style>
    </head>

    <body>
        <h6 class="myHeader">This is a styled header</h6>
    </body>
</html>

Open in new window

Which <h*> tag you use should carry some meaning, so if you feel like it's the main page title, then use h1. If it's a sub-heading, then maybe h2 or h3. You can use anything from h1 to h6.
ASKER
Tessando

Thank you guys for your continued assistance. In using @John's suggestion, I do see the FireFox Developer Console -> Inspect as pulling from the correct places, meaning the "H" tag and the css as expected (e.g. slides.css).

This was further evidenced by @Chris's suggestion of swapping to a normal/standard H tag. I did a search in the HTML document and noticed that <h2> wasn't being used. I simply added the line that called the custom font but am still getting default-looking fonts.

Does it matter where I put the "@font-face" call? I moved it above the <h2> tag and it didn't make a difference.

Thanks again for your help.

ASKER CERTIFIED SOLUTION
Chris Stanyon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Tessando

Thank you. Putting the style in the header section worked for me. Thank you for your patience. This likely means that my path was incorrect to the CSS or something. Thanks again. I appreciate everyone's contribution.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Chris Stanyon

No worries.

It does sound like a path issue - just remember, that any files linked in your CSS (images / fonts) etc are relative to the CSS file - not the HTML file