0

I have my Webfont downloaded: leaguegothic-condensed-regular-webfont

body{
    background-color:silver;
    color:white;                                
    padding:20px 20px 20px 20px;
    font-family:'League Gothic', "Condensed Regular";
}

It shows up in Google Chrome and Firefox however, it is using some sort of default fallback font when displaying in Safari. What can I do to resolve this?

Shulkin
  • 47
  • 6
  • Where's your `@font-face` declaration for that font? Also, the CSS you're showing tries to load _two_ fonts: `League Gothic`, and if that doesn't exist, it'll load a font called `Condensed Regular`. If _that_ doesn't exist, and because you've not specified any other font or generic category keyword, you've told the browser to use "whatever it wants". – Mike 'Pomax' Kamermans Dec 10 '19 at 23:28
  • Hi Mike thanks for answering. Where would I write the @font-face declaration? Under the padding? I also thought that I was specifying what font from its family to use. I have condensed, regular, regular condensed, and other varieties of this font. If this is specifying two different fonts how would I make it so that I am targeting the Regular Condensed version of League Gothic? – Shulkin Dec 10 '19 at 23:38
  • If you have a font that no one else has, and you want that font to be used on your webpage, you'll have to [write a `@font-face` rule for that font](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face). It's not as simple as specifying the family: no one's computer is guaranteed to have (a) that font or even (b) that font using the exact same name or even (c) that font, with the same name, as well as the exact same version. – Mike 'Pomax' Kamermans Dec 10 '19 at 23:45
  • Alright, that makes sense. However, I am assuming that I am going to write an src attribute to locate it. This is the name of my font: leaguegothic-condensed-regular-webfont.ttf how would I write the src to locate it? folder/fontname? – Shulkin Dec 11 '19 at 00:06
  • See previous link. But _do not_ use a ttf, it's not 2012 anymore. Use a `.woff2` (or older `.woff`) version. Which should be trivial to find given that the filename already says it's a webfont, and no one distributes webfonts as ttf-only. [You just need woff2](https://stackoverflow.com/a/36110385/740553) – Mike 'Pomax' Kamermans Dec 11 '19 at 00:07
  • Alright, I have it working, but now the font displays somewhat distorted. What can I do about that? – Shulkin Dec 11 '19 at 00:52
  • 1
    Never mind I got it working just needed to set a font-size – Shulkin Dec 11 '19 at 01:17

0 Answers0