Google Font not showing on Mobile or Safari

Hello,

We have imported fonts from Google however they do not show up on iOS or Android devices. They work fine on Desktop: Chrome, Edge and Firefox but does not work on Safari on macOS. 

Any help would be appreciated as I'm very new to CSS.

 

Site URL: www.commission.global

Code used: 

@import url('https://fonts.googleapis.com/css?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:wght@700&display=swap');

h1,h2,h3,h4,h5,h6, .sqs-block-button-element, .list-item-content__title{

font-family: 'Plus Jakarta Sans', sans-serif !important; 

  font-weight: 700 !important;

}

.header-menu-nav-item, .header-nav-item {

font-family: 'Plus Jakarta Sans', sans-serif;

  font-weight: 700;

}

body, p, .site-wrapper

{

  font-family: 'Atkinson Hyperlegible', sans-serif; font-weight: 400

}

 

.header {

  background-color: #ffffff !important;

}

 

.header-announcement-bar-wrapper{

  padding-top: 0 !important;

  padding-bottom: 0 !important;

}

.user-items-list-item-container[data-section-id="60f0123d38a0fc3ca9697233"] > li { background: #06424c !important; }

 

.user-items-list-item-container[data-section-id="60f0123d38a0fc3ca9697233"] > li:nth-child(odd) { background: #0d2a46 !important; }

 

.sqs-layout .sqs-row .sqs-block:first-child{

  padding-top: 0px !important;

}

.sqs-block{

  padding-top: 0px !important;

  padding-bottom: 0px !important;

}

 

Remove @import code

Add this to Code Injection > Header

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

 

Thank you. This advice fixed my Google Fonts issue on mobile browsers.