Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 4, 2024 at 10:20 am #1461291
    lauragrashoff

    Hey,

    ich habe schon länger ein Problem mit dem Einbindung von custom fonts. Ich habe es mit dem Import und mit @font-face probiert. Leider ohne Erfolg.

    Ich habe zwei Schriften “Calibri” (für Headlines) und “Poppins” (für body) installiert. Auf dem Desktop sah das auch alles ganz schick aus, jedoch auf dem iPhone wurden der body Text nicht richtig angezeigt.
    Nun habe ich noch etwas herum probiert, die Schriften in allen Formaten hochgeladen und nun wird der body Text auch fälschlicherweise in Calibri angezeigt und ich bekomme das nicht geändert. Angeblich ist in #top die Calibri definiert, aber ich finde den CSS Code dafür nicht, um das zu ändern. Und auf dem iPhone wird die Headline Schrift auch nicht in bold-cursiv angezeigt.

    Was habe ich übersehen, um die Schriften auf allen Geräten richtig und optisch gleich darzustellen?

    July 5, 2024 at 6:32 am #1461412
    Ismael

    Hey lauragrashoff,

    Thank you for the inquiry.

    Did you follow the guidelines for the font file structure, especially for the Calibri font? Please note that Custom Font Manager is intended for Google Fonts, but you can still upload custom fonts from other sources provided that the file structure is correct. Please refer to the documentation below for more details.

    // https://kriesi.at/documentation/enfold/typography/#how-to-upload-custom-fonts > File Structure

    Best regards,
    Ismael

    July 5, 2024 at 12:59 pm #1461440
    lauragrashoff

    Hey Ismael,

    thanks for your reply.

    Unfortunately, the incorrect display of the headlines on iOS remains. According to CSS the font “Calibri” is not found. It is easily found and displayed correctly on the desktop. When uploading the fonts, I paid attention to all formats. How come the font is not found only on iOS?

    July 6, 2024 at 4:06 pm #1461488
    Mike

    Hi,
    Please try disabling the Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and any caching plugin that you may be using, then clear your cache a few times and check, If this doesn’t help keep these disabled and include a admin login in the Private Content area so we can examine.
    This seems to only occur in Safari, I also checked with Mac Chrome, Firefox & Windows in Chrome, Firefox, & Edge in which the font error doesn’t occur.
    It looks like the css rules are missing the closing semicolons which many caching plugins will remove and most browsers will self correct, but is this case it looks like Safari is having trouble.

    Best regards,
    Mike

    July 7, 2024 at 1:13 pm #1461534
    lauragrashoff

    Hey Mike,

    I disabled the compression of the CSS and JSS files and cleared the cache several times. Unfortunately, this still didn’t fix my font issue on iOS. Only the body text is displayed correctly on iOS. He can’t find the headline.

    July 7, 2024 at 3:30 pm #1461544
    Mike

    Hi,
    Thank you for the link to your site, I see the in inspector for Safari the font that is showing says it is “calibri” while it doesn’t look correct, and I can’t find any conflicts.
    When I text in Chrome & Firefox on the Mac the correct “calibri” is shown. As I researched online I see a lot of posts for “Safari not showing calibri font” as this seems to be a issue that others are having.
    I have asked the rest of the team if they have any ideas, Thank you for your patience.

    Best regards,
    Mike

    July 7, 2024 at 4:41 pm #1461556
    lauragrashoff

    Hey Mike,

    I decided to use a different font family (Open Sans) for mobile and tablet and added this code:

    @media only screen and (max-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open-Sans', sans-serif;
font-style: italic; 
}
}

    Funnily enough, the Calibri is now displayed as the headline on the iPhone. And I can’t find the reference to the code why the browser finally understands that it should use “Calibri”.
    So why it works now, I have no idea, but it works ;)

    Unfortunately, Calibri or Open Sans are not displayed on the tablet in Safari. I don’t understand this again…

    And I also adjusted the .av-special-heading using CSS: 

    #top .av-special-heading .av-subheading.av-subheading_above {
font-size: 32px !important;
    font-family: 'calibri' !important; 
    color: #ff0044 !important;
}

    Unfortunately the special heading font is not displayed on mobile in Safari… sorry i opened such a bottomless pit …

    I hope your team finds a solution to help me out :’)

    July 7, 2024 at 5:13 pm #1461557
    Mike

    Hi,
    Your css for the headings doesn’t have the enough specifically, I would recommend this:

    @media only screen and (max-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
#top #wrap_all .all_colors h1, 
#top #wrap_all .all_colors h2, 
#top #wrap_all .all_colors h3, 
#top #wrap_all .all_colors h4, 
#top #wrap_all .all_colors h5, 
#top #wrap_all .all_colors h6 {
  font-family: 'Open-Sans', sans-serif;
font-style: italic; 
}
}

    plain h1, h2, h3, h4, h5, h6 is not enough to override the theme.
    As for Safari it can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
    I doubt that this is what you are experiencing right now, but please keep this in mind

    Best regards,
    Mike

    July 7, 2024 at 6:37 pm #1461560
    lauragrashoff

    Hey Mike,

    Thanks for the more specific code.
    The problem still remains. On iOS Safari the headline is displayed in Calibri, but unfortunately not in Safari on the iPad.

    And do you have another solution for the special heading?

    July 7, 2024 at 7:15 pm #1461562
    Mike

    Hi,
    For iPad it looks like “calibri-cursiv-bold-new” is showing in the DOM, check your Enfold Theme Options ▸ Advanced Styling for the H1 heading and see if that font is selected. If you have more than one H1 style selected the one at the bottom may have the most specifically.

    Best regards,
    Mike

    July 8, 2024 at 8:06 am #1461590
    lauragrashoff

    Hey Mike,

    thanks, I have now selected the correct font “calibri 700” for all the headline settings that I made in Advanced Settings. Unfortunately, this doesn’t change the subheading in Safari iOS and all headlines still don’t look right in Safari Desktop and iPad.

    How can that be?

    July 8, 2024 at 8:57 pm #1461640
    lauragrashoff

    I played around a bit with the inspector in safari and found the solution! Actually totally simple.

    I added “font-style: italic; ” to the headings and remove “‘” from around the font-family ‘calibri’.
    Now Safari no longer seems to have a problem finding the custom font.

    Unfortunately, setting the Headline font in Advanced Setting is not enough, so I added the following code:

    #top h1, h2, h3, h4, h5, h6 { 
    font-family: calibri !important; 
font-style: italic; 
}

    After all, thank you very much for your effort!

    July 8, 2024 at 10:29 pm #1461644
    Mike

    Hi,
    Glad to hear that you have this sorted out, and thanks for sharing your solution. 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 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Custom Fonts’ is closed to new replies.