Why isn't my custom font displaying on mobile using the Colorblock theme?

[APEXWW]

I am using Colorblock theme. I used this code in my base.css file :

@font-face {
font-family: 'OCR-A BT';
src: url("OCR-A BT.woff2") format('woff2'),
url("OCR-A BT.woff") format('woff');
}

* { font-family: "OCR-A BT"!important; }

@font-face {
font-family: 'OCR-A BT';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url('OCR-A BT.woff2') format('woff2'), url('OCR-A BT.woff') format('woff');
}

.page-title {
font-family: 'OCR-A BT', sans-serif;
}

its showing my font just fine on desktop but not on any mobile devices. 

I have uploaded the .woff & .woff2 fonts to the assets & files folders. 

My shop is : https://apexworldwide.shop

[Kani]

Hi @APEXWW 

It should be 

url({{ "OCR-A BT.woff2" | asset_url }}) format("woff2");

[KetanKumar]

@APEXWW 

oh sorry for that but your have missing some other font type 

TTF, OTF, WOFF, WOFF2, SVG 

please upload above type