1

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>
Jim
  • 13
  • 1
  • 4
  • Why are you loading Droid Serif, Open Sans and Roboto Slab if you only use Brasley ? You have a whole portion of MyFonts Webfont comments in your tag, is that normal as well ? How are you calling Webfont's CSS ? Is it a classic wordpress hook ? – Jake Apr 11 '19 at 08:10
  • Thanks for the response Jake. I'm a bit of a newbie with custom font kits (obviously) but I have followed the install instructions that came with my Brasley webkit from MyFonts. That included: 1) Uploading the contents of the kit to the root: https://www.awesomescreenshot.com/image/3968773/5c654cb0f90d61f2b78ac5302550c8f4 2) Call the kit from header.php: 3) Edited my CSS to include the sample CSS code that came with the kit (much of which you see in my original post). Again, all is loading fine in Chrome/FF. Not Safari. – Jim Apr 11 '19 at 17:30
  • 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;`. And by the way, you don't need the quotes around the font family name, it's only needed where there is a space between the names of the font (such as "Proxima Nova" for example). – Jake Apr 12 '19 at 07:19
  • That worked! Thanks so much for the assistance. – Jim Apr 17 '19 at 18:30
  • could you mark my answer as accepted ? – Jake Apr 23 '19 at 08:05

1 Answers1

2

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.

Jake
  • 1,398
  • 1
  • 9
  • 19