Шрифт не отображается в Safari или мобильных браузерах - PullRequest
Новая
       23

Шрифт не отображается в Safari или мобильных браузерах

0 голосов
/ 11 апреля 2019

Проблемы с отрисовкой моего собственного шрифта MyFonts в Safari и мобильных браузерах. Chrome и Firefox в порядке.

Файлы шрифтов и файлы MyFontsWebfontsKit.css находятся в нужном месте, файлы правильно вызываются в основной таблице стилей. Файлы шрифтов включают в себя .eot .woff. woff2 .ttf .svg.

URL: http://geltor.com

Правильный шрифт отображается в Chrome и Safari на моем Mac, но Safari и все мобильные браузеры по умолчанию используют резервную копию без засечек. Буду признателен за любые указания по правильному отображению шрифта Brasley. Спасибо!

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: 

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

1 Ответ

0 голосов
/ 18 апреля 2019

Из того, что я вижу на вашем сайте, сейчас используется только резервный вариант без засечек.Brasley в настоящее время не отображается.Однако, если вы измените название шрифта на «Brasley-Regular», он работает.

В основном переключите это: 

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

На 

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

FYIвам не нужны кавычки вокруг имен семейств шрифтов, они нужны только тогда, когда имя шрифта содержит пробелы или другие (например, «Proxima Nova»).См. Этот вопрос для получения дополнительной информации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...