1

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.

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

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

  • 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 Mar 4 at 12:10
  • Are you using the same otf file as I am? Wondering if that could be the issue... – InterLinked Mar 4 at 12:15
  • I downloaded it online. – norcal johnny Mar 4 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 Mar 5 at 3:30
  • @InterLinked You may have a bad font file. Try downloading it from a different source. – norcal johnny Mar 5 at 3:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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