Link to home
Start Free TrialLog in
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!

User generated image
Avatar of John Korchok
John Korchok
Flag of United States of America image

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


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.
Avatar of Tessando

ASKER

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?

User generated image
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

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:

User generated image
@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. :-)


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


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.

User generated image
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.
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.
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

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. :-)

User generated image
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.
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.
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.

User generated image
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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