Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 13, 2021 at 10:09 am #1316580
    Monika

    Hello,

    Chrome does load all fonts,
    Safari has problems with it.

    Do you know what to do?

    If there is a possibility I would like to define the “Backup”-Fonts in the css section because the fonts he takes currently are really bad.

    Link in private Section. :)
    thank you!

    August 16, 2021 at 7:39 am #1316902
    Ismael

    Hey Monika,

    Thank you for the inquiry.

    If there is a possibility I would like to define the “Backup”-Fonts in the css section

    What do you mean by “backup” fonts? Would you like to load the font differently? You might be able to use the @font-face rule.

    // https://css-tricks.com/snippets/css/using-font-face/

    We checked the site on Safari and both fonts (Montserrat and Oswald) are being loaded correctly — text on both browsers look similar as expected. You can see a screenshot of the page on Safari below.

    Screenshot: https://imgur.com/a/KO9OWer

    Best regards,
    Ismael

    August 17, 2021 at 4:24 pm #1317180
    Monika

    Hi Ismael,

    It should look like the Screenshot attached on the left side (chrome). On the right side I used a safari browser, this is the wrong Font.
    By Backup Font I mean the font that the browser takes if the first font is not available. As a backup font f. ex. the browser should pick the Oswald. That Font is more similar to the font I choose in first step. But somehow he does not do that.

    I’m wondering why its shown correctly in Chrome..

    I used:

    @font-face {
    font-family: “Akrobat-Black”;
    src: url(Akrobat-Black.zip)
    format(truetype);
    }

    August 19, 2021 at 10:36 am #1317461
    Ismael

    Hi,

    Thank you for the update.

    The zip file is not a valid source for the font. You have to extract the zip file to a specific directory. You should also use the absolute path or URL of the fonts.

    Example: 

    @font-face {
  font-family: "Akrobat-Black";
  src: url("https:/site.com/fonts/Akrobat-Black.woff2") format("woff2"),
       url("https:/site.com/fonts/fonts/Akrobat-Black.woff") format("woff");
}

    // https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

    Best regards,
    Ismael

    January 24, 2022 at 7:15 pm #1336938
    Monika

    Hello,

    thank you! It worked all good..

    till now :/ my client just called me.

    On i phone (Safari) no font is shown correctly.
    I have no Idea where the Problem is.

    Thanks for your Help,
    Monika

    January 25, 2022 at 10:29 am #1337014
    Ismael

    Hi,

    Thanks for the update.

    It is working correctly on our end as shown in the screenshot below (see private field). You might have to ask your clients to purge the cache or tell them to check the site on incognito mode.

    Best regards,
    Ismael

    January 27, 2022 at 10:11 am #1337452
    Monika

    Hey Ismael,

    This Sceenshot shows exactly what I see, and what’s wrong. :)
    this Fonts are not correct. It should be the Acrobat-Font for Headline for Example.
    When you open the Website in Google Chrome, it is shown correctly.
    I dont know where the problem is. Why its showing the correct font on chrome but in Safari it does not work.

    Cheers
    Monika

    January 27, 2022 at 10:49 am #1337477
    Ismael

    Hi,

    this Fonts are not correct. It should be the Acrobat-Font for Headline for Example.

    I thought that you are using the Akrobat-Black font because that is the font that is currently applied to the heading elements. This is the css code that is currently active or that is currently used for the heading elements.

    h1, h2, h3, h4, h5, h6 {
    font-family: "Akrobat-Black" !important;
}

    The same font is shown in the screenshot above. You may need to adjust the css a bit.

    Best regards,
    Ismael

    January 27, 2022 at 12:34 pm #1337493
    Monika

    Hi Ismael,

    i use exactly the code that you have written.
    In the private section you find a Screenshot with my Fonts Folder. Perhaps there is a mistake?

    In Theme Editor, I wrote this:

    `
    @font-face {
    font-family: “Akrobat-Black”;
    src: url(“/wp-includes/fonts/Akrobat-Black.woff”) format(“woff”),
    url(“/wp-includes/fonts/Akrobat-Black.ttf”) format(“truetype”),
    local(“Akrobat-Black”),
    local(“Akrobat Black”);
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: “Akrobat-Black” !important;
    }

    @font-face {
    font-family: “Akrobat-Black”;
    src: url(Akrobat-Black.zip)
    format(truetype);
    }

    January 27, 2022 at 1:44 pm #1337512
    Monika

    PS: you can login and check..

    January 27, 2022 at 2:06 pm #1337519
    Monika

    I changes the performance settings in enfold (do NOT comprimize css .. )
    Now it works. Hope it will stay so. 🙏🏼☺️

    Nevertheless,.. could you please have a quick look if my css above is correct?

    January 28, 2022 at 11:55 am #1337685
    Ismael

    Hi,

    Thank you for the update.

    The font is actually displaying correctly earlier, at least on our end. You might be looking on a cached version of the page. And yes, the css code above is correct aside from this css rule, which we already removed.

    /* font anwählen können */
@font-face {
font-family: "Akrobat-Black";
src: url(Akrobat-Black.zip)
	format(truetype);
}

    Best regards,
    Ismael

    January 30, 2022 at 9:34 pm #1337939
    Monika

    Thank you very much!

    January 30, 2022 at 10:32 pm #1337944
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Cant load Fonts in Safari’ is closed to new replies.