u/4ur3lius

Hope somebody here can help me.

Here's the situation. I am using Dawn 15.1.0 and I use a custom font for my branding. I have uploaded to webfont files Shopify. I have then added the following code at the end of my asserts>base.css file.

@font-face {       
       font-family: "NAME";
       font-display: swap;       
       -webkit-font-smoothing: antialiased;       
       -moz-osx-font-smoothing: antialiased;       
       src: url("NAME.woff2" | asset_url) format("woff2"),url("NAME.woff" | asset_url) format("woff"),url("NAME.ttf" | asset_url) format("truetype"); } 

@font-face
        font-family: "NAME";       
        font-display: swap;       
        -webkit-font-smoothing: antialiased;       
        -moz-osx-font-smoothing: antialiased;       
        src: url("URL FOR WOFF2" | file_url) format("woff2"),url("URL FOR WOFF" | file_url) format("woff"), url("URL FOR TRUETYPE" | file_url) format("truetype"),url("URL FOR OTF" | file_url) format("otf");

It's probably not the best way to code it but, since I am only using the one font on my site, I then set the font as the default for everything using

body * {     
        font-family: "NAME" !important;   
}

I thought that was all I needed to do to. My problem is this works great for desktop viewers but, when I view my site on mobile, the font isn't displayed for any of the elements on the page resulting in it looking terrible and unprofessional.

Does anybody have any idea how to get things to display properly on mobile?

Also, if I didn't want to set the font universally, how do I go about assigning it to elements on a page since the custom font does not show up in the font selection list? Is that something I would have to do for every element (and then redo every time there was a code update)?

Thank you