Webfont не работает на мобильных устройствах, даже с несколькими форматами - PullRequest
Новая
       18

Webfont не работает на мобильных устройствах, даже с несколькими форматами

0 голосов
/ 09 июля 2019

Я купил веб-шрифт у MyFonts (Kokomo Breeze Regular), и он отлично работает на настольном компьютере, но не будет отображаться на мобильном телефоне.

Я добавил все различные форматы файлов, используя @ font-face,но он все еще не работает на мобильном телефоне: 

@font-face { 
    font-family: "Kokomo Breeze"; 
    src: url({{ 'kokomo-breeze.eot' | asset_url }});
    src: url({{ 'kokomo-breeze.eot?#iefix' | asset_url }}) format('embedded-opentype'),
    url({{ 'kokomo-breeze.woff2' | asset_url }}) format('woff2'),
    url({{ 'kokomo-breeze.woff' | asset_url }}) format('woff'),
    url({{ 'kokomo-breeze.ttf' | asset_url }}) format('truetype'),
    url({{ 'kokomo-breeze.svg#kokomo-breeze' | asset_url }}) format('svg');
}

Я также попытался добавить это в начало моей таблицы стилей, как сказано в инструкциях MyFonts: 

/**
 * @license
 * MyFonts Webfont Build ID 3780250, 2019-07-01T14:26:51-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: KokomoBreeze-Regular by Nicky Laatz 
 * URL: https://www.myfonts.com/fonts/nicky-laatz/kokomo-breeze/regular/
 * Copyright: Nicky Laatz
 * Licensed pageviews: 100,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3780250
 * 
 * © 2019 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/39ae9a");

Это сайт, над которым я работаю: https://www.persuasion -nation.com /

Спасибо!

1 Ответ

0 голосов
/ 12 июля 2019

Привет, Мэри. Добро пожаловать в Переполнение стека.

Я полагаю, что проблема может быть связана с вашей ссылкой на файл шрифта. Я никогда не видел синтаксис, который вы используете раньше: src: url({{ 'kokomo-breeze.eot' | asset_url }});

Требуется четкая ссылка на файл шрифта, например: src: url('webfonts/32457D_0_0.eot');

Эта ссылка на файл шрифта должна быть относительно сценария css , который его вызывает. Если вы используете внутренний css (так, как вам кажется), вы должны сделать URL-адрес шрифта относительно HTML-скрипта, который его вызывает:

Font location image from Mary's site

То есть ваша ссылка будет выглядеть примерно так: /Fonts/thefontname.woff2

Для полного и рабочего примера ниже я вставил рабочий скрипт.

Обратите внимание: обязательно сделайте, как вы говорите, с добавлением лицензионного скрипта. 

/**
 * @license
 * MyFonts Webfont Build ID 3237525, 2017-02-14T14:25:07-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: RockwellStd-BoldCondensed by Monotype 
 * URL: http://www.myfonts.com/fonts/mti/rockwell/std-bold-condensed/
 * Copyright: Copyright 1990, 2002 Adobe Systems Incorporated. All Rights Reserved. Copyright 1990, 2002 The Monotype Corporation. All rights reserved.
 * Licensed pageviews: 250,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3237525
 * 
 * © 2017 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/32457d");

@font-face {font-family: 'RockwellStd-BoldCondensed';
  src: url('webfonts/32457D_0_0.eot');
  src: url('webfonts/32457D_0_0.eot?#iefix') format('embedded-opentype'),
       url('webfonts/32457D_0_0.woff2') format('woff2'),
       url('webfonts/32457D_0_0.woff') format('woff'),
       url('webfonts/32457D_0_0.ttf') format('truetype');}

Это должно быть повторено для каждого файла шрифта, то есть kokomo-breeze-регулярно, kokomo-breeze-bold, kokomo-breeze-уплотненного и т. Д., И т. Д. И т. Д.

Надеясь, это поможет вам. Задайте любые необходимые вопросы в комментариях.

-Parapluie

...