Webfont not working on mobile, even with multiple formats - webfonts

Question

I purchased a webfont from MyFonts (Kokomo Breeze Regular) and it's working fine on desktop, but won't show up on mobile.
I've added all different file formats using #font-face, but it's still not working on mobile:
#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');
}
I've also tried adding this to the top of my stylesheet, as it says to do in the MyFonts instructions:
/**
* #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");
This is the website I am working on: https://www.persuasion-nation.com/
Thanks!

Answer 1

Hullo, Mary. Welcome to Stack Overflow.
I believe the issue may be with your link to the font file. I have never seen the syntax that you are using before: src: url({{ 'kokomo-breeze.eot' | asset_url }});
A clear link to the font file is required, for example: src: url('webfonts/32457D_0_0.eot');
This link to the font file must be relative to the css script that is calling it. If you are using internal css (as it appears that you may be), then you should make the font url relative to the html script which calls it:
So your link would be something like /Fonts/thefontname.woff2
For a full and working example, I have pasted a currently-working script below.
Note also: definitely do as you say you are with the adding of the licence script.
/**
* #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');}
This should be repeated for each font file, i.e. kokomo-breeze-regular, kokomo-breeze-bold, kokomo-breeze-condensed, etc, etc
Hoping this helps you out. Ask any needed questions in comments.
-Parapluie