Custom font not working in mobile

Using the Jasper template. Here is the code I'm using:

@font-face { font-family: "Metropolis"; src: url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786e87913a06645e30fa5f/1568173704160/Metropolis-Medium.woff2), url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786e789da84f77dcfe024c/1568173688518/Metropolis-Medium.woff), url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786eaf9da84f77dcfe0813/1568173744007/Metropolis-Medium.otf);}

header#header * { font-family: 'Metropolis' !important; font-size: 22px!important; }

h1 { font-family: 'Metropolis' !important; font-size: 22px!important; }

Still not solved? @mplsjen

@tuanphan Everything working great on desktop. When I scale to mobile it reverts to the original template font...

@mplsjen can you share url?

jenorth.com

@mplsjen Mobile Header uses other tags, so the code won't work.

add this code for mobile

.mobile-bar-wrapper * {
   font-family: 'Metropolis' !important;
   font-size: 24px !important;
}

h1, i think it worked all devices?

you should add the files in other formats as well, for example, go to special font generator tool and convert your font then add all types because this has to do with the operating system.

@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}