css - Different problems with my font -

i'm looking regarding font issues have. i'm working on new online store , we're using swedish e-commerce platform. have access css code, not html.

i'm using "questrial" font, looks great in chrome , safari (i have mac). however, on firefox doesn't good. i'm using "all-small-caps" headlines , links in menu , these become thick in firefox.

this brings me next question. logged in , checked how @ phone (galaxy s6) , surprise, none of headlines nor links in small caps - regular letters. it's obvious phones browser don't "all-small-caps".

my question if there can fix these 2 problems? down below find relevant css code i'm using @ moment.

any appreciated!

<pre> {     color: grey;     font-weight: normal; }  li {         font-size: 18px;         font-variant: all-small-caps;         letter-spacing: 3px;         font-weight: normal; }  h1, h2, h3, h4, h5, h6 {     font-variant: all-small-caps;     letter-spacing: 3px;     line-height: 1;     font-weight: normal; } .tws-articles-two {     font-variant: all-small-caps;     font-weight: normal; </pre> 

the font-variant property doesn't seem compatible in mobile. can check details in link

also has compatibility older version desktop based browsers.

update:

you can use text-transform property change text format.