CODEWITHSUNDEEP
cssfirefoxfonts
Sirab33
Sirab33

Reputation: 1285

Firefox not displaying Italic Font correctly - while other browsers do

I'm trying to use a font called SF Distant Galaxy in my webpage (which I think I download from here: https://www.dafont.com/sf-distant-galaxy.font)

The problem is that while I'm specifying to use the ITALIC version of this font, Firefox insists on displaying only the REGULAR version of it.
Meanwhile, all the other Browsers I've tried (Safari, Chrome, and Opera) are showing the italic font correctly.

WHY?

Here's my CSScode:

.Lithium-Text-Class, .V-Text-Class, .TEXT-2-Class {
   font-family: SFDistantGalaxy-Italic, 'SF Distant Galaxy';
}

PLEASE NOTE: this CSS was automatically generated by Adobe Illustrator after I exported an illustration I created in it as an SVG file. So I didn't write this CSS code myself. I'm actually not sure why it puts single quotes around the regular version of the font but not around the Italic version, but again: this works on every browser I've tried except for Firefox, so I assume it's correct and it's a Firefox issue, not a code issue.

Any ideas how to fix this?

Upvotes: 0

Views: 439

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17334

Your svg's css should also include a font-style property like so:

.Lithium-Text-Class, .V-Text-Class, .TEXT-2-Class {
   font-family: 'SF Distant Galaxy';
   font-style: italic;
}

SFDistantGalaxy-Italic is a local font name,
'SF Distant Galaxy' - family names containing whitespace characters always need to be wrapped in quotes.

Most likely the font is installed locally but not referenced via @font-face.

It is therefore not displayed unless a visitor happens to have the "SF Distant Galaxy" font on his system.

Your websites's main stylesheet needs a @font-face like this:

@font-face {
  font-family: "SF Distant Galaxy";
  font-weight:400;
  font-style:normal;
  src: url("fonts/SF Distant Galaxy.ttf") format("truetype");
}

@font-face {
  font-family: "SF Distant Galaxy";
  font-weight:400;
  font-style:italic;
  src: url("fonts/SF Distant Galaxy Italic.ttf") format("truetype");
}

This way the browser can map a font-family name as well font-style to the correct font file.

Make sure your path to the font-file is correct, otherwise you'll see a fallback font.

@font-face {
  font-family: 'SF Distant Galaxy';
  src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SF Distant Galaxy';
  src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
  font-weight: normal;
  font-style: italic;
}

body {
  font-family: "SF Distant Galaxy";
}
<p>Regular <em>italic</em></p>

In the above example I've used transfonter to generate a font subset converted to a data url. The text will switch automatically between regular and italic since we have mapped both font files for different styles using the same family name.

Furthermore: Firefox might not display local fonts due to security settings.
However you can adjust this setting as described here.

Upvotes: 1

Related Questions