Search code examples
cssfontsfont-family

CSS3 font family doesn't work in safari

I have a problem changing the font-family of my h1 and p tags. The fonts work fine in Internet Explorer and Firefox, but in mobile Safari they turn in to Arial.

h1 {
    font-family: Cambria, "Times New Roman";
}

.text_1 {
    font-family: Cambria, "Times New Roman";
}

p and h1 are placed in the same floated container with auto height.

Any tips?

Solution

  • Right away, we can see that only one of the displayed fonts overlaps: Arial. None of the Calibri or Cambria fonts are available on the Mac, and the Mac has at least a dozen just on this page that aren’t available in Windows! In fact, between these two systems, there are only ten fonts that overlap: enter image description here