How can I successfully add the FF Mark Pro font to browsers?

Store Design
1

Hello!

Im trying to add new font named “FF Mark Pro” that i already bought from https://www.myfonts.com/

Im having trouble with it cause i cant see it any browser like chrome, safari, firefox even if im trying windows or mac.

What im doing its uploading fonts in “Assets” then adding this to my css tryign 2 differents way.

@font-face {
  font-family: "FFMarkRegular";
  src: src: url({{ font.woff | asset_url }}) format("font.woff"), 
       src: url({{ font.woff2 | asset_url }}) format("font.woff2");
}
.FFMarkRegular {
	font-family: FFMarkRegular;
}

and

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