Add custom font-icons

We have a requirement to add custom icons/images to the mobile ribbon. Only option to provide images is to give them as font icons. We uploaded the custom icons to a .woff file and refered it through a custom CSS file used in the application skin. But the font icons get always replaced by the Pega OOTB content.

Is it possible to introduce a custom font icon in Pega? Please advise on how to achive this.

@VENUSHKA - I hope the font definition is defined in the below format.

@font-face {
font-family: “Test Icons”;
src: url(“test.woff”) format(“woff”), url(“test.woff”) format(“woff”);
}

Need to refer the font family where this need to be present on DOM.Below example I have added a class name for a control and added this style.

.testIcon{
font-family: “Test Icons” !important;

}

Thank you