Firefox not displaying Italic Font correctly - while other browsers do-CodePudding

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?

CodePudding user response：

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,d09GMgABAAAAAAXwABAAAAAADMgAAAWYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgS4cKgZWAIEECCYJFAqMfItQCyAAATYCJAM6BCAFg1QHQAxIG EKyJ6DcUO/xWSJxVRKC 3iVf7/15rd9//7UtZCF/iBinjRHZWKWkNMGmJmq9nlzBYYMd9GVyPqxBP7tf12YumAeiESVUPW6vlKoRSmi0Uaqfp0Mk8nB YJfku9XW8tDb7ylJWSKQYP6f83p/auYwXkqeT3/OJmz7mf8A0IFBC2LPwUuQmV AGx8oiqyqkNw7M8gJfwzwgC AAAEAhJIQRwddWf2Jk0oxmp69KuLUhhAP6PAkBXq3dsgQUQgDABIBapwACtqLuhihbagGiK5vEFUpgJOaEgkIpoKkdnmYgTCf5/QCqDBGlMB0zMiQV5REcI4OquZ5/6VQ0y5qeqkq5BgTyQPoD7/aZigpHFEMBAFp886szN8UUkIrurL7IA8tfb1bHoKQEhiVAw2/bzq2RIVmSqopJWq6213iY77E4oRbtev3zkLZ/L0iSOwgDBK5ATvF2k8Y4VljuHl gajfjq8PDqoZgNQjydGD0su03sUlpX1WXdygmNgMFpSK4PW7UDeA MxSD/IFDCEQIJ8e3XzLVWhn4F6zLHhp4JdEtg/MA3Qda/MH8 /Cq4 BIdf9H1KX3xNo7dam73vKw/3232DwYL5zfX0ekOHV9w1wsgld3CsdusWzZjsvAF9kjVCj0K2q2kUAp3waLd4lWuOf6i68K7eemgz77yKXvwWPMtF bLQKjpF 8GO5v xau/02lxMZ4/MY7i5Dqvam29ePGH MGvqgZUWcv76q/hW9vu3TJ3xfnpdYVOHWuvD65u/QR0Hhx0iT549OeRXxCVWWZix6Htx3e3tXHwv6Zj4l 7o5YtHDVq6cLRE4vDoij665fG Ebc Mvaje31RLT/1V55 J54SZfTzHdOafdXp/eARdRdtYbOHcuCqgFVL 570W28dvCj3XPdY9bqr2LT4EeutUxoccG11DWVUyC6hTkAkEzI2sQRhgVBN0IKxQqmpUiQBMikaWFIFcasFEZm/rUUUoBwthr6zdPUdc8AsOKllB5OiguHZoc8A5taWJSExJwoSLIkKYgAKtoC3IqaJQh78dn0odrapA62zTWVULXMpI3UngxrqhnpEWeyGdKq53xapXMjx9D8fwuVUMkbFKLYCUKr9apVrSPPS3w4PasAe7AURpPidsZtuF7NpHy7REYonpf3ifUUhkk5cn0X6Urlyhh nx3XIYJDepHXZcIIvUIP0Jt8PwngdQxLuF0tlRTkuQxVs3AsGz1iOTJoMtHKUTCkEwTxvfw735UqKpJKlI/DnCz3XNnr4hhGkHVGhfsrZgKtGtI6MVC4anRyxYw2yHPkkCFkaCs9P/0FVXOcTaFyVkmWRpdJL5thVMywsQYAcboSJjYsTNzig5HJcl6aG7eMJinGYUplPw/ihGKt7EwFRFs6tiwrc0jVnCtL1RGDOihgvXL4JdOeVQ4FAhAU754duyI98lfbwA8DwGPv tJf5/ Rheas/AJgCQBAsFVLV7dV0CWnDjXMUuVCTJdN76L FNXVkzjCRXSKL/OK DSwQyFA2gwGAAhWwgW8Xixoc64Hu4aGirGeZA3VC8ZUS1lmyVCvSHOoxrQpHUy1U7xNC9KTzm7ohZRfLGWZJUO9ogsxRasv7BXDiqZ1 xe8fYL7C5HsqOdhrfirpfm7thaqczefV /s1TTpRznaTC5tKu3b/4LIvP75QcUiEYgGxtthtZJdrvkqkRb785us44kL8pFrrRYX9jPMDM6LIntaZ1fkNsMVtPZabZNWW20Og/N2JRfaQSepdEsueKdeoEZGJlgPMLFUlh ZHNJNuGaf/Yr7Jng3LfGa/vIGNTGUDWVJAs/6/5mQkZI 7PT8YoNMMMkU08ww2zwLLNzIep7rOo61xmhNBODy0/R/7q6bwLs JsUk9HlVLOY/C5Fr9gjzxHUTAAA=') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SF Distant Galaxy';
  src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAYgABAAAAAADQwAAAXHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgS4cKgZWAIEECCQJFAqMcItHCyAAATYCJAM6BCAFhCsHQAxDGygLUZRQzlpkPxNMtztIW4bOKKphov1l8IrBS7R8OovWyuqZHli420PYAPEDkAVA9UIFjCRScQjKRsgf9n/vX7gaxAb7DGaD/eAviwjBGpp7KCArxAEKy6Tr9OwkoJ3xUyxMZXeowtVlAnKig Xv11q98wxe7axh00XrTwypLZ 1d aoNzEvQS0kEYnb0HapYRJJLbHAzgStDvKfEQTwAQAgEBJFCOA67CJx WrHAKKvH2wsIYoB2E8BoFdP1pZgAQQgTACIRTIYoPU56ro I YQTdE8vogoZvIQfh6Csrlonsah8jFO3sXN0/h5Gvr/OvIKukhewqKzOZMP8fMhlE/Q6TyNDnAddbxPpblWyuFUZuMRBfJ62Qbgub2jmHI7rgHA0PjkSTsv1PeBhDbLf2kN8p8T XzRUAJSJMLc2Mrvz4mRrFCrPqPGTZo2a8GazUQqb Pty5 522arrLTCsiULpk1F8GvKKb9Cyk8T9nwQ53EM3qwjzw/FnA nTzzC16XmFfXRrNyh50kNZ4C6BaCruJVeAo1CwzDItwQg3EMgxneFirnUJFNtmUonm222DXARJwVxIamChDRSV6gpACjYHRFBwVjUs5/etF4AI4V7rorCCAEFCUqLoEheuSu0xqsAFWKvySmR10HcooB0hwjJKwKRKIrGja okBIiKK4NIBIkoQSfAnr2MxvEwUQYSaKuPBCQpcqxKGoU6Gw919Vj/V4celHhi0NxhMxhFd5jFay7lJ11ikOCS5hjUIzKebX1 CcrLSS1pEfvPfbb9ErulpzkXclX KdtSldTXIQlN/WJfqqlFFPlAfgs/iL9BWX WAX/9HAvyXa39Pey9PD3GsuIzU0c2TXfN9W5N9CamVXrSx7WvIjzvlC4vZQYO/W4fl3x8nWyY9hzYB3rkTCyu3dofxnf/ET578aCkzQ9 xGXwb22oXGv5FnJfRKV  ROxcGz4uWTWFbcAd9gZc8BxdVaLzZ0YVQNRlkh1iwPO/d1zI3y9vNHuEYDUDNF1tY0F4YFQddCCsUKpkGRIAmQppNz14bcO1w57DrT2HAIAuurubAarc/fAyzLffT1 dCR6/Gdb2we2L3hHCfmmpogAhKFaIKgM PscjVEYCHfyGEqjZ1XRKzTz3YYTpYwDWyzA1VueCiiEUdaUAcQDJJ0H5nODBXAUrBIVElY vKQPK mjdOirASVcJtYCqNJMUmAakjLyiEFIqiegCie0FMqUarvvGRQqgwEMZymruciiSKAaqcXdQQkkBKm1j5Ivl/Tzm0yLEECnBMcrZil68BD4cLh3qMhNWcVWkRcvtA/okKZgfPS8Fo8qDLel35 xEc6GnFmTCJxmRHNTOCnzZLWNY1UJaBwsCRBqEwNUBuACLqPnk0S54facgkbxDo1hWUij66ZcBIDWwYGhe7BfqTJAfVy8HR5yg6el4EvKG2iYkamzZOgsL1FEG3nCsTKCrKcaAQgePN8fD5R PCUp1y9BuDdD/DHvqSVrOt/5QsMlgAABJsyk3qTw1OfJk2SohItRrSz0XdWdjev3FaiIln22bzW5DShCg5zvSSJAIEOBgAIVg0X8CUigQu8RL7XdZCRuOsyQWuVSTnd4VmmSNNHa2lzJKocACv2EBk56L9M8CMuk85HOTzLFB2dU7ST0X ZMLc/a3f4lRP410NsU0vHstT/laZsFJ7Lx3ecF6yf6Pf8O45qzckLozu737DpfzxJG5LOi2e3WIpoU3YN1FszadSGqTohNGY3pd8MrRmO 02bdDrtghuq21mh33EzNvxW3HRurW2TFoxbtui6nbWhOwcBTT4sxdzWnQjeJNRg1rpmNC0l1OzCgg47JTWt HwXzBpH 4Z02UVnXanRluocdImA/VN91GdSGH1wCPvXOO2KBk1atOnQbdCwkfNBi s41hqjNRGA 1/jf9uyGui670pGk1Mfahab8q5gxMq9qViNzxsAAAA=') 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.