0

I want to use Gotham font for my website which is not a web-safe font so I have the font sitting in the directory called 'gotham':

index.html

style.css

Gotham/Gotham-Light.otf

Here's what my CSS file looks like in the part that sets the font:

p.gotham-thin{font-family:"Gotham-Light";}


@font-face {
font-family: Gotham-Light;
src: url('Gotham/Gotham-Light.otf')  format('opentype');
}

here's what index.html does:

<p style="margin-top:140px; font-size:54px;" class="gotham-thin">ABOUT DIALOGIC</p>

but the Gotham font is only working on my computer in Google Chrome since I have the font installed locally, but when I run a VM that doesn't have the font installed then it will just use Tahoma font instead.

Is the problem that I'm using the OTF font file type?

user2636774
  • 89
  • 1
  • 3
  • 11
  • 1
    You can see from this older post: http://stackoverflow.com/a/1967226/2388219 that you need multiple font files to display the same font in different browsers. You probably are also running into the issue of needing to encapsulate your font name (you have encapsulated it on the `p.gotham-thin` but not on the `@font-face` declaration.) – Ming Nov 18 '13 at 01:28
  • possible duplicate of [How to embed fonts in HTML?](http://stackoverflow.com/questions/220236/how-to-embed-fonts-in-html) – Jukka K. Korpela Nov 18 '13 at 05:38

1 Answers1

0

Here are my steps to have the font working:

  • Font face first in css (font code on top of master css)
  • Have the type/format of font - EX: src: url(Gotham.ttf) format('truetype')
  • Also multiple fonts to support all browsers like the comment replied you got.
  • Make sure your host (local or not) has the MIME type for these fonts
Riskbreaker
  • 4,621
  • 1
  • 23
  • 31