search

google / fonts

Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
https://fonts.google.com
18.07k stars 2.6k forks source link

Google fonts not displaying on Safari 12/macOS Mojave in combination with Wordpress #1616

Open Pfahli opened 6 years ago

Pfahli commented 6 years ago

Good Evening, I have a problem with google fonts in combination with safari 12 on macOS Mojave and all my Wordpress-installations. Somehow, safari only uses the fallback, Helvetica or Times New Roman. I have the problem with every instance where I used google fonts on a self programmed Wordpress theme (based on _underscore) where I simply included the font face directly via the google fonts api in the head-section. I already tried to include the font-faces manually with woff, eof, eot and ttf as alternatives, but nothing seems to work.

Even more strange is, that it works on other sites I made without Wordpress, but I can't figure out what is causing the problem. It works on safari on iOS, chrome and firefox without any problems. Example: http://2018.fcforst.de/ --> Should use roboto and roboto slab http://konsolen-news.net --> Montserrat in the menu Does anybody else have similar problems or a solution to this?

Thanks for your time.

benekuehn commented 6 years ago

Have the same problem with Roboto in Safari 12 and Safari Technology Preview on Mojave

m4rc1e commented 6 years ago

@benekuehn @Pfahli Does this jsbin work for you in the offending browsers?

bkniffler commented 6 years ago

Being on mojave too, the jsbin of @m4rc1e doesn't work, it uses some default serif font. I'm not sure what the error is due, but using google fonts (in my case via http://kyleamathews.github.io/typography.js/) doesn't work. I wonder if it has something to do with apples latest privacy features in safari..

Pfahli commented 6 years ago

@bkniffler @m4rc1e @benekuehn Good news everybody, just installed the latest Technology Preview of Safari (61) and it seems to be working fine again

image image

I'm pretty sure they will include this in the final release of Mojave again. You can download the technology preview here: developer.apple.com

elliotttate commented 5 years ago

Still an issue for me on the final Mojave release. Also, the latest Safari Tech Preview (Release 65) still has the issue. :-(

elliotttate commented 5 years ago

It turns out I had a few things blocked in my hosts file. It's odd that Safari 12 was the only thing affected (the fonts loaded fine in every other browser. The hosts file should block it for every browser if it were really blocking it) and it only happened after updating to Mojave, but... clearing out the hosts file did fix the issue)

davelab6 commented 5 years ago

Maybe other browsers still had them cached

nicaha23 commented 5 years ago

i am having this same issue and i just updated to mojave a few days ago... @elliotttate what steps did you do to resolve it on your end? i'm not sure where or how to access/look for my hosts file...

thank you!!

micmac51 commented 5 years ago

same here with Safari 12. instead of Myriad pro it uses Times. Opening the same web sites with Opera, Chrome it comes fine with Myriad Pro

sladen commented 5 years ago

@nicaha23: /etc/hosts

But unless /etc/hosts was already manually edited (as per @elliotttate), it is unlikely to be same issue.

@nicaha23: please could you find a new, separate bug, and describe precisely what you are seeing, on which browsers, with which fonts, and will examples of the exact Javascript/CSS/etc being used.

sladen commented 5 years ago

@nicaha23 /etc/hosts. But that is only relevant here because @elliotttate had already manually edited /etc/hosts, thus contributing to the later issue.

@nicaha23: Please could you file a new separate bug report, describing the situation you are experiencing, and including the exact snippets of Javascript/CSS/etc being used in order to allow debugging.

kubido commented 5 years ago

I experience this issue also for "Montserrat" is there any solution ?

laerm0 commented 5 years ago

Hello, is anyone still having this problem?

@kubido Can you please give more details? Browser, OS, etc? Also, if you'd like, maybe filing a new issue would be good. :)

muhammadadamfirdaus commented 5 years ago

Have you tried exact @font-face instead import url in css? @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

I got this issue, but since I write full @font-face, problem solved.

panthershark commented 5 years ago

Maybe this will help.

I stumbled across this issue while trying to track down an intermittent problem with one of our websites. It is very possible this is a bug in Safari. I made an SSCCE here which causes fonts not to load correctly.

I'm not sure if this is related, but it might be relevant. Please let me know if this helps, there are any questions, or if you have any suggestions for this example.

https://github.com/doanythingfordethklok/safari-cache-bug

bfiessinger commented 4 years ago

If anyone is interested. It seems like Mojave does not respect multiple URL Parameters with the same name seperated by &. So multiple combined Google Fonts are not possible when copying the embed string from fonts.google.com.

So when using multiple fonts from Google only one of them will be loaded on the page. Now there are 2 possible Workarounds.

  1. Don't use combined Google Fonts
  2. Seperate the fonts by & and not by & which might be a better solution.

Hope that helps

nathan-williams commented 4 years ago

@bfiessinger Can you provide more details about your setup and reproduction steps so we can investigate further? Code snippets would be very helpful in understanding your situation.

bfiessinger commented 4 years ago

@nathan-williams for sure. I'll give you a quick example:

Steps to reproduce:

  1. Go to fonts.google.com
  2. Select two different Fonts, let's say "Roboto" and "Playfair Display"
  3. Copy the generated embed code or the href attribute of the generated embed code https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto&display=swap
  4. Now embed the link element on a page.
  5. Open Safari (Firefox too, didnt test it in chrome or others for now) on MacOS Mojave
  6. Go to developer tools -> inspect and search for your embedded fonts in the elements tab. As you can see below the string ?family=Playfair+Display&family=Roboto has been replaced with ?family=Roboto only. fonts

But one line above you can see a Google fonts URL containing two families. Like mentioned in https://github.com/google/fonts/issues/1616#issuecomment-645900593 replacing the &family with &family works totally fine.

So the URL i'm loading in the first <link> Element looks like this: https://fonts.googleapis.com/css2?family=Montserrat&amp;family=Nunito+Sans&amp;display=swap

Edit: I just saw that the generated snippet changed recently. Before it was https://fonts.googleapis.com/css?family=family-1|family-2&display=swap which also works without any problems.

jaclyntan commented 4 years ago

@nathan-williams for sure. I'll give you a quick example:

Steps to reproduce:

  1. Go to fonts.google.com
  2. Select two different Fonts, let's say "Roboto" and "Playfair Display"
  3. Copy the generated embed code or the href attribute of the generated embed code https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto&display=swap
  4. Now embed the link element on a page.
  5. Open Safari (Firefox too, didnt test it in chrome or others for now) on MacOS Mojave
  6. Go to developer tools -> inspect and search for your embedded fonts in the elements tab. As you can see below the string ?family=Playfair+Display&family=Roboto has been replaced with ?family=Roboto only. fonts

But one line above you can see a Google fonts URL containing two families. Like mentioned in #1616 (comment) replacing the &family with &amp;family works totally fine.

So the URL i'm loading in the first <link> Element looks like this: https://fonts.googleapis.com/css2?family=Montserrat&amp;family=Nunito+Sans&amp;display=swap

Edit: I just saw that the generated snippet changed recently. Before it was https://fonts.googleapis.com/css?family=family-1|family-2&display=swap which also works without any problems.

omg the &amp; actually worked..thanks so much you just saved me like an hr of googling non-answers.

bfiessinger commented 4 years ago

@nathan-williams were you already able to confirm the bug?

solepixel commented 4 years ago

Based on @bfiessinger's suggestion, just changing the & to &amp; didn't resolve the issue for me. Here's how I fixed it:

  1. Go to an online URL encoder, like: https://www.urlencoder.org/
  2. Paste everything after the ? into the box, and encode it.
  3. Replace everything after the ? with the encoded version.
  4. Profit.

In my case, I converted this:

https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Roboto+Slab:wght@500%3B700&display=swap

into this:

https://fonts.googleapis.com/css2?family%3DRoboto%2BCondensed%3Awght%40700%26family%3DRoboto%2BSlab%3Awght%40500%253B700%26display%3Dswap

Fixed it right up, works in Chrome, Safari and Firefox (Mac). Hope that helps someone!

marcfrancois commented 3 years ago

Hi I'm facing the same kind of problem on Safari under BigSur. Weirdly the Google font displays correctly, but the font 'ubuntu-title-fr' hosted on my site doesn't display. Here is the style: @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,700;1,300&display=swap'); @font-face { font-family:'Ubuntu-title-fr'; src:url('https://surterre.info/public_html/wp-content/themes/twentytwentyone-child/fonts/ubuntu-title-fr-webfont.eot') format('eot'), url('https://surterre.info/public_html/wp-content/themes/twentytwentyone-child/fonts/ubuntu-title-fr-webfont.eot?#iefix') format('embedded-opentype'), url('https://surterre.info/public_html/wp-content/themes/twentytwentyone-child/fonts/ubuntu-title-fr-webfont.woff') format('woff'), url('https://surterre.info/public_html/wp-content/themes/twentytwentyone-child/fonts/ubuntu-title-fr-webfont.woff2') format('woff2'), url('https://surterre.info/public_html/wp-content/themes/twentytwentyone-child/fonts/ubuntu-title-fr-webfont.ttf') format('truetype'), url('https://surterre.info/public_html/wp-content/themes/twentytwentyone-child/fonts/ubuntu-title-fr.ttf') format('truetype'); } I'm sure of the path, since that font displays correctly on Firefox or Chrome.

tonyp83 commented 2 years ago

If anyone is interested. It seems like Mojave does not respect multiple URL Parameters with the same name seperated by &. So multiple combined Google Fonts are not possible when copying the embed string from fonts.google.com.

So when using multiple fonts from Google only one of them will be loaded on the page. Now there are 2 possible Workarounds.

  1. Don't use combined Google Fonts
  2. Seperate the fonts by &amp; and not by & which might be a better solution.

Hope that helps

This fixes it my end, I've been searching around half hour for a fix (originally thought it was a .woff2 support issue) but just changing the & to an &amp; got both my fonts loading.

Thanks @bfiessinger!

GASOLINE commented 1 year ago

If anyone is interested. It seems like Mojave does not respect multiple URL Parameters with the same name seperated by &. So multiple combined Google Fonts are not possible when copying the embed string from fonts.google.com.

So when using multiple fonts from Google only one of them will be loaded on the page. Now there are 2 possible Workarounds.

1. Don't use combined Google Fonts

2. Seperate the fonts by **`&amp;`** and not by **`&`** which might be a better solution.

Hope that helps

You'r right, I had to make it like: @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&family=Ubuntu+Condensed");

Instead of 2 lines, where I seperatly load them. This solved the problem.