0

For some reason I can't get Google Fonts to work correctly on Safari. Both on a Mac and on mobile. Any suggestion to what I can improve to make it work on Safari too?

I have tried both

<style>
   @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500;700&display=swap');
</style>

and

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>

Even embedding them locally as Woff2 fonts.

The CSS to show the font is

body {
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: #6b6a6a;
    font-family: oswald !important;
    text-transform: uppercase;
    background:#202020;
    background-size: contain;
    display:none;
    overflow:hidden;
    overflow-y:scroll;
}
.text_widget {
    font-family: lato !important;
    font-weight: 400;
    text-transform: none;
    margin-top: 40px;
}
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Michael Nielsen
  • 61
  • 8

1 Answers1

0

You need to use CSS property -webkit-text-size-adjust. Here's a sample of how to apply this to your body, just for the iPhone:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}
Gerald Ylli
  • 116
  • 1
  • 15
  • Thanks for the suggestion, not at the office right now so can't test until later. But doesn't this only affect the size? The problem is that it's using times new roman instead of the google font. – Michael Nielsen Dec 09 '20 at 17:38
  • hmm can you try this https://stackoverflow.com/a/33959265/14618967 – Gerald Ylli Dec 10 '20 at 08:14