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;
}