0

I'm trying to create a very basic HTML email signature. I want all of the text to display in Open Sans font, which I'm importing via Google Fonts.

On Chrome it displays exactly as I want it: click here for image

However on Safari and on my IOS mobile device, Open Sans doesn't pull through: click here for image

Here's my code:

<!doctype html>
<head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>
</head>

<table style=" 
            background-color: #000000;
            font-family: 'Open Sans' !important;
            font-weight: 400;
            font-style: normal;
            text-align: left;
            color: #ffffff;
            font-size: 14px;
            line-height: 21px;
            padding: 10px 40px;
            border-spacing: 0;">
<tbody>
<!-- in here i make the table as shown in the images above -->
</tbody>
</table>

I imagine the issue lies in the header / table style code.

I've tried @import (as above) and also to pull in the Google Font, and I've even tried embedding the font locally as both Woff and Woff2 fonts.

I am a HTML rookie so forgive me if I'm being silly here, but I've trawled the internet for hours now and nothing I've attempted has fixed the issue.

burgeremily
  • 1
  • 2

1 Answers1

0

I suggest you use a complete font import with all weights and styles so that Safari can render it properly with the different font weights. I happened to me once. Use this import statement and it should be fixed:

<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
</style>
alejo742
  • 151
  • 3