Я пытаюсь создать интернет-магазин с помощью Shopify. Теперь я пытаюсь использовать купленный мной шрифт, который работает с мобильным средством просмотра Shopify:
![enter image description here](https://i.stack.imgur.com/4phaa.png)
Однако, когда я пытаюсь так увидеть его самостоятельно физический телефон (IOS), я получаю следующий результат:
![enter image description here](https://i.stack.imgur.com/Gb71F.jpg)
Я импортировал шрифты в папку с ресурсами и добавил ссылки прямо в мой файл footer.liquid, например:
<style>
@font-face {
font-family: "Geogrotesque Regular";
src: url("GeogrotesqueRegular.woff") format("woff"),
url("GeogrotesqueRegular.woff2") format("woff2"),
url("GeogrotesqueRegular.ttf") format("ttf"),
url("GeogrotesqueRegular.otf") format("otf");
url('{{'GeogrotesqueRegular.woff' | asset_url }}') format ('woff');
url('{{'GeogrotesqueRegular.woff2' | asset_url }}') format ('woff2');
url('{{'GeogrotesqueRegular.otf' | asset_url }}') format ('otf');
url('{{'GeogrotesqueRegular.ttf' | asset_url }}') format ('ttf');
}
</style>
И я использую их следующим образом:
<h3 style="color: #fff; font-family: Geogrotesque Regular; font-size: 20px;">{{ block.settings.title | escape }}</h3>
Я не уверен, почему он плохо отображается на мобильном телефоне , кто-нибудь знает?
Заранее спасибо!