3

I am looking to use the old "phone book" font for a project I'm working on currently,

I have the fonts and was able to set up a stylesheet for them:

http://interlinked.cf/css/bellgothic.css

@font-face {
  font-family: 'BellGothicStd';
  src: url('/fonts/bell-gothic/BellGothicStd-Black.otf') format("opentype"),
    url('/fonts/bell-gothic/BellGothicStd-Black.ttf') format('truetype'),
    url('/fonts/bell-gothic/BellGothicStd-Black.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'BellGothicStd';
  src: url('/fonts/bell-gothic/BellGothicStd-Bold.otf') format("opentype"),
    url('/fonts/bell-gothic/BellGothicStd-Bold.ttf') format('truetype'),
    url('/fonts/bell-gothic/BellGothicStd-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'BellGothicStd';
  src: url('/fonts/bell-gothic/BellGothicStd-Light.otf') format("opentype"),
    url('/fonts/bell-gothic/BellGothicStd-Light.ttf') format('truetype'),
    url('/fonts/bell-gothic/BellGothicStd-Light.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'BellGothicBT';
  src: url('/fonts/bell-gothic/BellGothicBT-Black.otf') format("opentype"),
    url('/fonts/bell-gothic/BellGothicStdBT-Black.ttf') format('truetype'),
    url('/fonts/bell-gothic/BellGothicStdBT-Black.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'BellGothicBT';
  src: url('/fonts/bell-gothic/BellGothicBT-Bold.otf') format("opentype"),
    url('/fonts/bell-gothic/BellGothicStdBT-Bold.ttf') format('truetype'),
    url('/fonts/bell-gothic/BellGothicStdBT-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

I then tried adding on a page:

font-family: BellGothicStd;

...which didn't seem to have any effect. I added

font-style: normal;

and bold as well but neither did anything.

If I specify a fallback font, it uses that; otherwise it appears as Times New Roman.

Does anything else need to be done to use my custom font? I have been able to use them in the past with no issue. Perhaps the fonts are corrupted in some way that might prevent using them?

Yes, I am loading the external stylescript in the head, just like the main CSS file. I checked all the syntax and spelling; this happened when testing both locally and on the server.

In the past, I've downloaded complete packages for fonts, and here I just have the fonts themselves; do I need anything else to make it "work"?

UPDATE:

Does not work:

h1 {
        font-family: 'BellGothicStd';
    }

H1 heading now appears as Time News Roman, indicating a failure.

Same thing with:

h1 {
    font-family: 'BellGothicStd';
    font-weight: normal;
    font-style: normal;
}

The font looks slightly different, but it's still Times New Roman.

Improve this question
7
  • 1
    Have you checked in developer tools to see if there is an error loading something?
    – Steve
    Commented Mar 2, 2019 at 22:50
  • What does your complete html markup look like for the text you are trying to load the font to?
    – norcal johnny
    Commented Mar 3, 2019 at 7:46
  • @norcaljohnny Simply .divclass { font-family: BellGothicStd; }
    – InterLinked
    Commented Mar 3, 2019 at 22:08
  • @InterLinked I meant more like so... h1 { font-family: 'BellGothicStd', Arial, sans-serif; font-weight:normal; font-style:normal; }
    – norcal johnny
    Commented Mar 3, 2019 at 23:28
  • @InterLinked You need to apply it to text not just a div.
    – norcal johnny
    Commented Mar 3, 2019 at 23:30

2 Answers 2

Reset to default
7

Ok here is how it should work.

The CSS

@font-face {
font-family: "BellGothicStd";
src: url("fonts/BellGothicStd-Black.otf") format("opentype");
}

h1 {
font-family: 'BellGothicStd', Arial, sans-serif;
font-weight:normal;
font-style:normal;
}

The HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Font Test</title>

<!-- CSS  -->
  <link href="css/custom.css" type="text/css" rel="stylesheet"/>
</head>

<!-- Main -->
<body>

<h1> This is BellGothicStd font text </h1>

</body>
</html>

and the fonts Folder should be located in the CSS folder. Also, remove your forward slashes in the font url.

The result is this Font Test Demo

Mind you this just one normal font text not light or such.

enter image description here

And the folder structure

Folder structure Folder structure

Improve this answer
8
  • Okay, I moved the fonts directory into the css directory so it matches your directory structure; I am using your exact CSS and HTML, still it does not work (it shows up as Arial)
    – InterLinked
    Commented Mar 4, 2019 at 12:10
  • Are you using the same otf file as I am? Wondering if that could be the issue...
    – InterLinked
    Commented Mar 4, 2019 at 12:15
  • I downloaded it online.
    – norcal johnny
    Commented Mar 4, 2019 at 20:50
  • I added this to my head and still no change: <link rel="stylesheet" href="shadtv.onthewifi.com:8080/fonttest/css/custom.css"> - so even using your stylesheet isn't fixing it, bizarre...
    – InterLinked
    Commented Mar 5, 2019 at 3:30
  • @InterLinked You may have a bad font file. Try downloading it from a different source.
    – norcal johnny
    Commented Mar 5, 2019 at 3:35
1

This is probably due to CORS and is expected behaviour. I know it sounds confusing, but the reason is due to the source of your fonts and not the web page itself.

An explanation I wrote for a similar issue with different solutions for Apache, NGINX, IIS or PHP available in multiple languages can be found here:

https://www.hirehop.com/blog/cross-domain-fonts-cors-font-face-issue/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.