CODEWITHSUNDEEP
csswordpressbrowserfontssafari
Jim
Jim

Reputation: 23

Font not rendering in Safari or mobile browsers

Having issues with my custom MyFonts font rendering in Safari and mobile browsers. Chrome and Firefox are fine.

Font files and MyFontsWebfontsKit.css files are in the right place, with the files called correctly in the master stylesheet. Font files include .eot .woff. woff2 .ttf .svg.

URL: http://geltor.com

The correct font shows up in Chrome and Safari on my Mac, but Safari and all mobile browsers default to the sans-serif backup. Would appreciate any pointers on getting the correct Brasley font to display everywere. Thanks!

MyFontsWebfontsKit.css:

@import url("//hello.myfonts.net/count/391209");


@font-face {font-family: 'Brasley-Bold';src: url('webfonts/391209_0_0.eot');src: url('webfonts/391209_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_0_0.woff2') format('woff2'),url('webfonts/391209_0_0.woff') format('woff'),url('webfonts/391209_0_0.ttf') format('truetype'),url('webfonts/3927A3_A_0.svg') format('svg');}


@font-face {font-family: 'Brasley-Light';src: url('webfonts/391209_1_0.eot');src: url('webfonts/391209_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_1_0.woff2') format('woff2'),url('webfonts/391209_1_0.woff') format('woff'),url('webfonts/391209_1_0.ttf') format('truetype'),url('webfonts/3927A3_2_0.svg') format('svg');}


@font-face {font-family: 'Brasley-Thin';src: url('webfonts/391209_2_0.eot');src: url('webfonts/391209_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_2_0.woff2') format('woff2'),url('webfonts/391209_2_0.woff') format('woff'),url('webfonts/391209_2_0.ttf') format('truetype'),url('webfonts/3927A3_0_0.svg') format('svg');}


@font-face {font-family: 'Brasley-BoldItalic';src: url('webfonts/391209_3_0.eot');src: url('webfonts/391209_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_3_0.woff2') format('woff2'),url('webfonts/391209_3_0.woff') format('woff'),url('webfonts/391209_3_0.ttf') format('truetype'),url('webfonts/3927A3_B_0.svg') format('svg');}


@font-face {font-family: 'Brasley-Medium';src: url('webfonts/391209_4_0.eot');src: url('webfonts/391209_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_4_0.woff2') format('woff2'),url('webfonts/391209_4_0.woff') format('woff'),url('webfonts/391209_4_0.ttf') format('truetype'),url('webfonts/3927A3_6_0.svg') format('svg');}


@font-face {font-family: 'Brasley-LightItalic';src: url('webfonts/391209_5_0.eot');src: url('webfonts/391209_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_5_0.woff2') format('woff2'),url('webfonts/391209_5_0.woff') format('woff'),url('webfonts/391209_5_0.ttf') format('truetype'),url('webfonts/3927A3_3_0.svg') format('svg');}


@font-face {font-family: 'Brasley-ThinItalic';src: url('webfonts/391209_6_0.eot');src: url('webfonts/391209_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_6_0.woff2') format('woff2'),url('webfonts/391209_6_0.woff') format('woff'),url('webfonts/391209_6_0.ttf') format('truetype'),url('webfonts/3927A3_1_0.svg') format('svg');}


@font-face {font-family: 'Brasley-SemiBold';src: url('webfonts/391209_7_0.eot');src: url('webfonts/391209_7_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_7_0.woff2') format('woff2'),url('webfonts/391209_7_0.woff') format('woff'),url('webfonts/391209_7_0.ttf') format('truetype'),url('webfonts/3927A3_8_0.svg') format('svg');}


@font-face {font-family: 'Brasley-Regular';src: url('webfonts/391209_8_0.eot');src: url('webfonts/391209_8_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_8_0.woff2') format('woff2'),url('webfonts/391209_8_0.woff') format('woff'),url('webfonts/391209_8_0.ttf') format('truetype'),url('webfonts/3927A3_4_0.svg') format('svg');}


@font-face {font-family: 'Brasley-MediumItalic';src: url('webfonts/391209_9_0.eot');src: url('webfonts/391209_9_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_9_0.woff2') format('woff2'),url('webfonts/391209_9_0.woff') format('woff'),url('webfonts/391209_9_0.ttf') format('truetype'),url('webfonts/3927A3_7_0.svg') format('svg');}


@font-face {font-family: 'Brasley-SemiBoldItalic';src: url('webfonts/391209_A_0.eot');src: url('webfonts/391209_A_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_A_0.woff2') format('woff2'),url('webfonts/391209_A_0.woff') format('woff'),url('webfonts/391209_A_0.ttf') format('truetype'),url('webfonts/3927A3_9_0.svg') format('svg');}


@font-face {font-family: 'Brasley-RegularItalic';src: url('webfonts/391209_B_0.eot');src: url('webfonts/391209_B_0.eot?#iefix') format('embedded-opentype'),url('webfonts/391209_B_0.woff2') format('woff2'),url('webfonts/391209_B_0.woff') format('woff'),url('webfonts/391209_B_0.ttf') format('truetype'),url('webfonts/3927A3_5_0.svg') format('svg');}

Style.css excerpt:

<style>
p, h2, h3, h4, h5, a {
color:#1a2f5a;
font-family: "Brasley", sans-serif !important;
font-size: 1em;
line-height: 1.25em;
-webkit-font-smoothing: antialiased;
}

article .title-link a {
    color: #1a2f5a;
}

.bbx-bullet-link.type-2 {
    color: #1a2f5a;
}

.Brasley-Bold { 
    font-family: Brasley-Bold;
    font-weight: normal;
    font-style: normal;
}
.Brasley-Light { 
    font-family: Brasley-Light;
    font-weight: normal;
    font-style: normal;
}
.Brasley-Thin { 
    font-family: Brasley-Thin;
    font-weight: normal;
    font-style: normal;
}
.Brasley-BoldItalic { 
    font-family: Brasley-BoldItalic;
    font-weight: normal;
    font-style: normal;
}
.Brasley-Medium { 
    font-family: Brasley-Medium;
    font-weight: normal;
    font-style: normal;
}
.Brasley-LightItalic { 
    font-family: Brasley-LightItalic;
    font-weight: normal;
    font-style: normal;
}
.Brasley-ThinItalic { 
    font-family: Brasley-ThinItalic;
    font-weight: normal;
    font-style: normal;
}
.Brasley-SemiBold { 
    font-family: Brasley-SemiBold;
    font-weight: normal;
    font-style: normal;
}
.Brasley-Regular { 
    font-family: Brasley-Regular;
    font-weight: normal;
    font-style: normal;
}
.Brasley-MediumItalic { 
    font-family: Brasley-MediumItalic;
    font-weight: normal;
    font-style: normal;
}
.Brasley-SemiBoldItalic { 
    font-family: Brasley-SemiBoldItalic;
    font-weight: normal;
    font-style: normal;
}
.Brasley-RegularItalic { 
    font-family: Brasley-RegularItalic;
    font-weight: normal;
    font-style: normal;
}


.colorblock-dblue {color: white; background-color: #1a2f5a; padding:1em; width: 200px; margin-bottom: 1em;}

.colorblock-mblue {color: white; background-color: #515d7d; padding:1em; width: 200px; margin-bottom: 1em;}

.colorblock-lblue {color: white; background-color: #c2c9d3; padding:1em; width: 200px; margin-bottom: 1em;}

.colorblock-pink {color: white; background-color: #fee9df; padding:1em; width: 200px; margin-bottom: 1em;}

.colorblock-dpink {color: white; background-color: #CF7475; padding:1em; width: 200px; margin-bottom: 1em;}

body {color:#1a2f5a; font-family: "Brasley-Regular", sans-serif;  font-size: 1em; line-height: 1.25em; -webkit-font-smoothing: antialiased;}

a {color: inherit;}

a:hover {color: #CF7475; text-decoration: none;}

.menuitem {font-size: 1em; text-transform: uppercase; letter-spacing: .5em !important;}

.header-headline {font-size: 2.5em; line-heght: 3em; line-height: 1.25em; font-family: "Brasley-Medium", sans-serif;}

.header-body {font-size: 1.25em; line-height: 1.8em;}

.bluebox {background-color: #515d7d; padding: 1em; }

.bluebox-headline {font-size: 1.25em; line-height: 1.25em; font-family: "Brasley-Regular"; text-transform: uppercase; letter-spacing: .25em; color:#fee9df; }

.bluebox-body {color:#fee9df; line-height: 1.8em;}

.section-title {font-size: 1.25em; line-height: 1.5em; font-family: Brasley-Bold; text-transform: uppercase; letter-spacing: .25em;}

.section-headline-dblue {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium";}

.section-headline-mblue {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium"; color: #515d7d;}

.section-headline-dpink {font-size: 3em; line-height: 1.25em; font-family: "Brasley-Medium"; color:#CF7475;}

.section-subhead {font-family: "Brasley-Bold";}

.body-dblue {color:#1a2f5a;}

.body-mblue {color: #515d7d;}

.CTA {font-family: "Brasley-Medium";}

.Button-dblue {color:#fee9df; padding:.5em; padding-bottom: .4em; width: 200px; background-color: #1a2f5a; text-align: center; text-transform: uppercase; letter-spacing: .5em;  }

.Button-mblue {color:#fee9df; padding:.5em; padding-bottom: .4em; width: 200px; background-color: #515d7d; text-align: center; text-transform: uppercase; letter-spacing: .5em;  }

.legal {font-size: .75em; color:#515d7d;}

.footer {background-color: #2E4368; padding: 1em;}

.footer-menutitle {text-transform: uppercase; letter-spacing: .5em; font-family: "Brasley-Bold"; color: #fee9df; }

.footer-menuitem { font-size: .85em; color: #fee9df;}
</style>

Upvotes: 2

Views: 9055

Answers (1)

Jake
Jake

Reputation: 1438

From what I can see on your website, only the sans-serif fallback is used right now. Brasley is not currently displayed. If however you change the name of the font to "Brasley-Regular", it does work.

Basically switch this :

font-family: "Brasley", sans-serif !important;

To

font-family: Brasley-Regular, sans-serif !important;

FYI, you don't need quotes around font family names, it's only needed when the font name has spaces or other in its name (such as "Proxima Nova" for example). See this question for more information.

Upvotes: 3

Related Questions