We help IT Professionals succeed at work.

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

87 Views
Last Modified: 2020-05-13
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
Comment
Watch Question

John KorchokProduction Manager
CERTIFIED EXPERT

Commented:
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");

Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
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.
TessandoIT Administrator

Author

Commented:
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?


John KorchokProduction Manager
CERTIFIED EXPERT

Commented:
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>
TessandoIT Administrator

Author

Commented:
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 KorchokProduction Manager
CERTIFIED EXPERT

Commented:
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>

TessandoIT Administrator

Author

Commented:
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 KorchokProduction Manager
CERTIFIED EXPERT

Commented:
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.
TessandoIT Administrator

Author

Commented:
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">
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.
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
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

TessandoIT Administrator

Author

Commented:
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 KorchokProduction Manager
CERTIFIED EXPERT

Commented:
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.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
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.
TessandoIT Administrator

Author

Commented:
Thank you guys for your continued assistance. In using @John's suggestion, I do see the F ireFox 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.

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
TessandoIT Administrator

Author

Commented:
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.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
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

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.