0

Background

I am expecting that, the webfonts used on my site would work on mobile devices exactly as they are on desktop. This is, working as expected on desktop.

CSS

    @font-face {
        font-family: 'sdFont';
        src:
            url("/fonts/sdFont.woff") format("woff"),
            url("/fonts/sdFont.svg") format("svg"),
            url("/fonts/sdFont.eot"),
            url("/fonts/sdFont?#iefix") format("embedded-opentype");
        font-weight: normal;
        font-style: normal;
    }

        h1, h2, h3,h4,h5 {
             font-family: 'sdFont', Arial, serif;
        }

Problem

On Android Firefox The H1, H2 are working with the correct webfonts, the h3 and h4 however are not.

On Android Chrome none of the webfonts are working.

I don't understand how on firefox some of the fonts would work, yet on other elements would not :/

animuson
  • 53,861
  • 28
  • 137
  • 147
Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291

1 Answers1

0

Turns out, that my CND was:

http://sexdiaries.co.uk

But I was viewing the site at:

http://www.sexdiaries.co.uk

So, for web fonts when viewing them the CND needs to match the global URL. Bit odd, but its defiantly what happened in my situation.

Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291