Why is my custom font overlapping on mobile? - css

Question

I'm working on a Squarespace site and added a MyFonts web font to use for some headings and the index menu. It displays beautifully on desktop but when I view it on mobile, almost all instances of that font (Sackers Gothic) show up wrong. They either overlap, in the case of the menu, or go off screen. It seems to be more of a problem when they're center-aligned. One user also said this was a problem on her iPad, although it looked fine on mine. In the case of the home page index menu, the links should also go to a new line on mobile, as they do on my iPad.
It's CLEARLY a problem with my CSS but how do I fix it? How do I get it to display normally (ie the way it displays when I just use the built-in squarespace fonts, or the way it displays on desktop)?
The one hint I got at the root problem is that since I'm overriding the font that Squarespace is putting on, it appears that my iPhone positions the text based on what the Squarespace font would have ben, and then converts to the MyFonts font, rather than positioning it based on the MyFonts font. But again I have no idea of that's the actual problem, or how to fix it.
This is what it looks like on desktop:
And this is what it currently looks like on mobile:
Home Page
Another Page
This is all the site-wide custom CSS I'm using (in case there are more problems I'm missing).
/**
* #license
* MyFonts Webfont Build ID 3477103, 2017-11-02T21:34:57-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: SackersGothicMedium by Monotype
* URL: https://www.myfonts.com/fonts/mti/sackers-gothic/medium/
* Copyright: Digitized data (C) 2003 Agfa Monotype Corporation.
*
* Webfont: SackersGothicMediumAlt by Monotype
* URL: https://www.myfonts.com/fonts/mti/sackers-gothic/medium-alt/
* Copyright: Digitized data (C) 2003 Agfa Monotype Corporation.
*
*
* License: https://www.myfonts.com/viewlicense?type=web&buildid=3477103
* Licensed pageviews: 250,000
*
* © 2017 MyFonts Inc
*/
/* #import must be at top of file, otherwise CSS will not work */
#import url("//hello.myfonts.net/count/350e6f.css");
#font-face {
font-family:'SackersGothicMedium';
src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca489140b7d05d1be44c/1509673545091/350E6F_0_0.eot');
src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca489140b7d05d1be44c/1509673545091/350E6F_0_0.eot?#iefix')
format('embedded-opentype'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca5e9140b7d05d1be6b9/1509673566929/350E6F_0_0.woff2')
format('woff2'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca57f9619ab843b69aba/1509673560243/350E6F_0_0.woff')
format('woff'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca50e2c483cd2608015b/1509673553520/350E6F_0_0.ttf')
format('truetype');
}
#font-face {
font-family: 'SackersGothicMediumAlt';src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6471c10bfd21731909/1509673572949/350E6F_1_0.eot');src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6471c10bfd21731909/1509673572949/350E6F_1_0.eot?#iefix') format('embedded-opentype'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca7ae4966baa783e612d/1509673594306/350E6F_1_0.woff2') format('woff2'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca75085229ec684a6add/1509673589300/350E6F_1_0.woff') format('woff'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6d8165f5e83ce3e406/1509673582003/350E6F_1_0.ttf') format('truetype');}
span.collection-nav-item-span{
font-family: 'SackersGothicMedium' !important;
}
h2.site-tagline{
font-family: 'SackersGothicMedium' !important;
}
h2{
font-family: 'SackersGothicMedium' !important;
text-transform: lowercase;
}
h1{
font-family: 'SackersGothicMedium' !important;
text-transform: lowercase;
}
blockquote{
font-family: 'SackersGothicMedium' !important;
text-align: center;
}
figcaption{
font-family: 'Raleway';
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase;
text-align: center !important;
}
#media only screen and (min-width: 1040px) {
span.collection-nav-item-span{
font-size: 3.7vw;
}
}
.site-branding h1 {
background-image:url(https://static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fcef98e31d1945635645b1/1509748633336/FIG_17_WEB_Logo_1_dark.png);
background-repeat: no-repeat;
background-size: contain;
}
.has-index-nav.swap-header-color:not(.view-item) .site-branding h1 {
background-image:url(https://static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fcede408522952619026f3/1509748197382/FIG_17_WEB_Logo_1.png);
background-repeat: no-repeat;
background-size: contain;
}
And the website is figcookingschool.com
And here's a screenshot of the HTML for that part of the homepage
HTML
Thank you SO much in advance for your help!!