I have loaded some special fonts via @font-face. The fonts load, and wotk normally in all the browsers, but thay wont render in Safari. The fonts however render after you select the element with the special font. Fonts are loaded with cia CSS like:
@font-face {
font-family: 'Brandon';
font-style: normal;
font-weight: bold;
src: url('../fonts/brandon_bold.woff') format('woff');
}
@font-face {
font-family: 'Brandon-Regular';
src: url('../fonts/Brandon_reg.otf');
}
The element have a jQuery function (flip) and i have tried to uncomment the function, but the fonts render wrong nontheless.
I have narrowed down the problem to my transition that is done in CSS like this:
-ms-transition-property: all;
-ms-transition-duration: 2s;
-ms-transform: rotateX(0deg);
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
-webkit-transform: rotateX(0deg);
-o-transition-property: all;
-o-transition-duration: 2s;
-o-transform: rotateX(0deg);
-moz-transition-property: all;
-moz-transition-duration: 2s;
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
if i uncomment the -webkit- part, the fonts work normally, but the transition (naturally) does not. Any help would be much appriciated! Thanx to all the readers and answears in advance!