Site URL: https://gtf-technologies.squarespace.com
Password to access the site is: sustainability
I've added a custom brand font upload to my client's website. It displays perfectly on Chrome, but defaults to a serif font on Safari. I've used custom fonts many times and never had this problem. There are multiple .otf files and I've linked them all in Custom CSS as follows:
@font-face {
font-family: 'Decimal Bold';
src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/62602780700de322bef6cdda/1650468736767/Decimal-Bold-Pro.otf');
font-family: 'Decimal Semibold';
src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/6260279055b5a43970fe6cbf/1650468752519/Decimal-Semibold-Pro.otf');
font-family: 'Decimal Book';
src:
url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/62602785cc73d30b0c8e4e45/1650468741689/Decimal-Book-Pro.otf');
font-family: 'Decimal Medium';
src:
url ('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/6260278ba67dc25a0def59f0/1650468747580/Decimal-Medium-Pro.otf')
}
h1 {font-family: 'Decimal Bold'!important;}
h2 {font-family: 'Decimal Semibold'!important;}
h3 {font-family: 'Decimal Semibold'!important;}
h4 {font-family: 'Decimal Medium'!important;}
sqsrte-large {font-family: 'Decimal Medium'!important;}
p {font-family: 'Decimal Book'!important;}
sqsrte-small {font-family: 'Decimal Book'!important;
}
.header-nav *, nav.header-menu-nav-list * {
font-family: 'Decimal Semibold'!important;
text-transform: uppercase;
}
.sqs-block-button-element {
font-family: 'Decimal Semibold'!important;
}
.sqs-button-element--primary {
font-family: 'Decimal Semibold'!important;
}
.user-items-list .list-section-title p {
font-family: 'Decimal Bold'!important;
}
.user-items-list-carousel__slides h2.list-item-content__title {
font-family: 'Decimal Semibold'!important;
}
.sqs-block-form .field-list .title {
font-family: 'Decimal Semibold'!important;
}
Any feedback on possible errors or how to fix would be greatly appreciated!
Site URL: https://gtf-technologies.squarespace.com Password to access the site is: sustainability I've added a custom brand font upload to my client's website. It displays perfectly on Chrome, but defaults to a serif font on Safari. I've used custom fonts many times and never had this problem. There are multiple .otf files and I've linked them all in Custom CSS as follows: @font-face { font-family: 'Decimal Bold'; src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/62602780700de322bef6cdda/1650468736767/Decimal-Bold-Pro.otf'); font-family: 'Decimal Semibold'; src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/6260279055b5a43970fe6cbf/1650468752519/Decimal-Semibold-Pro.otf'); font-family: 'Decimal Book'; src: url('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/62602785cc73d30b0c8e4e45/1650468741689/Decimal-Book-Pro.otf'); font-family: 'Decimal Medium'; src: url ('https://static1.squarespace.com/static/625ff0119482286fea0d6589/t/6260278ba67dc25a0def59f0/1650468747580/Decimal-Medium-Pro.otf') } h1 {font-family: 'Decimal Bold'!important;} h2 {font-family: 'Decimal Semibold'!important;} h3 {font-family: 'Decimal Semibold'!important;} h4 {font-family: 'Decimal Medium'!important;} sqsrte-large {font-family: 'Decimal Medium'!important;} p {font-family: 'Decimal Book'!important;} sqsrte-small {font-family: 'Decimal Book'!important; } .header-nav *, nav.header-menu-nav-list * { font-family: 'Decimal Semibold'!important; text-transform: uppercase; } .sqs-block-button-element { font-family: 'Decimal Semibold'!important; } .sqs-button-element--primary { font-family: 'Decimal Semibold'!important; } .user-items-list .list-section-title p { font-family: 'Decimal Bold'!important; } .user-items-list-carousel__slides h2.list-item-content__title { font-family: 'Decimal Semibold'!important; } .sqs-block-form .field-list .title { font-family: 'Decimal Semibold'!important; } Any feedback on possible errors or how to fix would be greatly appreciated!
