Font-Face fonts are showing up in Safari but not in Firefox or Chrome

[Novacaine (Aaron Jaffe)]

Building a site and using custom fonts from Myfont.com. The font displays perfectly in Safari but not at all in Firefox or Chrome. Attaching the Hype document here.

Any help on this would be much appreciated!!

Thanks in advance - Aaron

Novaweb5.zip (389.5 KB)

[h_classen (Hans-Gerd Claßen)]

firefox logs 404 for fonfiles and cross-origin request which blocks also …

storing your fonts within hype the path must be ‘${resourcesFolderName}/yourFontfile’

[Daniel]

Yeah @h_classen is correct – this will likely work if you load it from your domain novacainestudio.com, but not locally. These are the errors I’m seeing.

If you continue to see this even on your domain, you can add this to an .htaccess file in your root directory.

Header set Access-Control-Allow-Origin *

But – that may not override the restrictions from Myfonts. Check out https://www.myfonts.com/help/#troubleshooting

[Novacaine (Aaron Jaffe)]

Thanks for responding to this - unfortunately I don’t think I understand where I’ve made my error…

is it in these references to the stylesheet location that has to be different? If so can you give me a real world example of how it should look?

Thanks - Aaron

[Daniel]

Happy to help – First can you post a link to the document on the web?

[Novacaine (Aaron Jaffe)]

Hey Daniel - thanks for the help.

The link is www.novacainestudio.com/Novaweb5.html

• A

[HyperFocus (Happy Hyper)]

I don’t know what the resolution was above … but my issue seems related.

I have followed the other posts related to fonts (above and elsewhere) but somehow my fonts don’t show up in Chrome (78) and Firefox (47) and Internet Explorer (11). Probably missing something important.

Here is what it should look like (notice the crossing of the W bars at the top)

Here is a test link where it does not reflect the font above

https://www.scrpt.com/office/hype/fonts.html

Here is the file.

Fonts in different browsers.hype.zip (425.0 KB)

Thanks in advance …

HappyHyper

[jonathan (Jonathan Deutsch)]

Where did you get the code for the head html? Your head code in the font has syntax issues and also is using the wrong type of single quote in a lot of places. Hit Edit Font… in the resources library for the font and try pasting this instead:

<style>

@font-face {
  font-family: 'SchnyderWideSLight';
  
src: url('${resourcesFolderName}/SchnyderWideSLight0.eot'), /* IE9 Compat Modes */
  url('${resourcesFolderName}/SchnyderWideSLight0.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('${resourcesFolderName}/SchnyderWideSLight0.otf') format('opentype'), /* Open Type Font */
    url('${resourcesFolderName}/SchnyderWideSLight0.svg') format('svg'), /* Legacy iOS */
    url('${resourcesFolderName}/SchnyderWideSLight0.ttf') format('truetype'), /* Safari, Android, iOS */
    url('${resourcesFolderName}/SchnyderWideSLight0.woff') format('woff'), /* Modern Browsers */
    url('${resourcesFolderName}/SchnyderWideSLight0.woff2') format('woff2'); /* Modern Browsers */

  font-weight: normal;
  font-style: normal;
}

</style>

[HyperFocus (Happy Hyper)]

I thought I had it figured out – but font addition is proving tricky. The only potential issue I can see (after nearly 2 hours of trial and error) is that in the CSS Font Family field, it keeps adding single apostrophes even though I remove them. There’s something I am doing wrong and I don’t know what! This font does not show properly in Safari, Chrome or Firefox. Adding the CSS and demo file in case helpful.

Archive 2.zip (346.5 KB)

[jonathan (Jonathan Deutsch)]

There are some ¬¬¬ characters at the end of the LightSuper.eot line in Gza Superlight. Delete those and it will work.

Note that it will show correctly in Hype when it works too, so that might make editing a little easier!

It is interesting that you are getting smart quotes; I think we have some options that can disable that substitution for the next version of Hype. Until then, I recommend going into the mac System Preferences Keyboard Pref Pane and unchecking the “Use smart quotes and dashes” box.

[HyperFocus (Happy Hyper)]

Thank you a thousand times.

[HyperFocus (Happy Hyper)]

Seems I have some font issues with your Hype font Baskerville and my custom font Selfie in Safari and Firefox – but not in Chrome.

In Hype, it shows fine.

Screen Shot 2020-03-15 at 8.42.39 PM.png

But in Safari it doesn’t

Am attaching the file for review. Thx in advance!

Font issue in Safari and Firefox.hype.zip (258.8 KB)

[h_classen (Hans-Gerd Claßen)]

selfieEmbedCorrectedhype.hype.zip (250.2 KB)

be sure to use correct straight apostrophs and font-family-name

[HyperFocus (Happy Hyper)]

Thank you Hans. I had tried to match the font family name but it didn’t work – because of the wrong apostrophes! Lesson learnt!

Thanks again!

HappyHyper

[HyperFocus (Happy Hyper)]

Any clue how to fix the Hype default font, Baskerville not showing up in Safari. The CSS code for this is not editable, so not sure how to fix this.

Thanks!

[Daniel]

Works for me on Mac, or were you referring to iOS?

baskerville.hype.zip (10.2 KB)

[HyperFocus (Happy Hyper)]

Does not work for me on Mac Safari - version 13.0.4 (14608.4.9.1.4)

Here is the Hype version

and here is the Safari version – see the difference in the “y” bottom.

[jonathan (Jonathan Deutsch)]

This was using @Daniel’s nearly-empty document? (If not, please send the exact zip that reproduces that). Do you have an alternative Baskerville installed on your machine?

[HyperFocus (Happy Hyper)]

Yes, this was using Daniel’s document.

Yes, I do have Baskerville installed on my machine, so that may be the root cause!