[Resolved] Font is not properly loading on mobile site

Home Forums Support [Resolved] Font is not properly loading on mobile site

Home Forums Support Font is not properly loading on mobile site

  • This topic has 6 replies, 3 voices, and was last updated 5 months ago by David.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2379365
    Jennifer

    Hi – So I was able to upload a local font, and it seems to working on desktop, but not on mobile browsers (tested on Chrome and Safari).

    What might be going wrong?

    Below is my CSS:

    /* aracne https://www.dafont.com/aracne.font */
    @font-face {
    font-family: ‘Aracne’;
    font-style: normal;
    font-weight: 400;
    src: url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.eot’) format(’embedded-opentype’); /* IE9 Compat Modes */
    }
    src: local(”),
    url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
    url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
    url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.woff’) format(‘woff’), /* Modern Browsers */
    url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.svg#PermanentMarker’) format(‘svg’); /* Legacy iOS */
    }

    #2379426
    Fernando
    Customer Support

    Hi Jeniffer,

    Can you double check the links you’ve added?

    For instance, this doesn’t seem to be working: https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.ttf

    #2379916
    Jennifer

    Hi Fernando – WordPress doesn’t allow me to upload TTF. Do you know of any way around this? Should I just delete this?

    Jen

    #2379924
    Jennifer

    I deleted the TTF url and I still have problems…does iphone mobile require a certain type of font file?

    #2379940
    David
    Staff
    Customer Support

    Hi there,

    just to cover. The only font types you really require today is woff and woff2 so you can ignore OTF, EOT or SVG unless the font specifically requires features only available to that font.

    Now your @font-face CSS has some errors in it.

    Replace it with this:

    @font-face {
        font-family: 'Aracne';
        font-style: normal;
        font-weight: 400;
        src: local(''),
        url('https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.woff') format('woff'); /* Modern Browsers */
    }
    #2379957
    Jennifer

    worked like a charm. thank you, David.

    i was using the template from the google font helper, so there was probably a lot of ancillary stuff in the script.

    thanks!

    #2379966
    David
    Staff
    Customer Support

    Glad to be of help 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.