Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 8, 2021 at 8:43 pm #1309296
    tiffanytnttobol

    I uploaded the Google font Playfair Display for some of my headers and it is not working on any browser on the iPhone or Safari on desktop.

    July 12, 2021 at 5:35 am #1309677
    Ismael

    Hey tiffanytnttobol,

    Thank you for the inquiry.

    How do you load the font? Looks like you did not select the font from the Enfold > General Styling > Fonts panel. Try to disable the cache and minification plugin, then test the page again on Safari.

    Best regards,
    Ismael

    July 12, 2021 at 8:48 pm #1309852
    tiffanytnttobol

    We wanted a specific version of the font (Playfair Display bold italic 700) so I uploaded it via the custom font manager. Under general styling I have Work Sans selected because we are using that for some headers. Under advanced styling I applied the playfair display font to 3 header tags.

    I don’t have a cache and minification plugin on the site. I cleared the cache on the host, WPEngine, and I am still having the same issue.

    I will include screenshots of the variance between Chrome and Safari for your review.

    Thank you for your help!

    July 17, 2021 at 5:45 pm #1310519
    Mike

    Hi,
    Thank you for your patience and the link to your page, I tried to recreate this situation on my test site and compared it to your site and I found that on both in Safari the .ttf fonts didn’t seem to render. Even thogh we had downloaded the font from Google Fonts and uploaded to the custom font manager the font was still being served by the google cdn as a cached .woff, incorrectly.
    The .ttf was not found on Safari at all.
    So I was able to work around this by extracting the PlayfairDisplay-BoldItalic font and uploading to the custom font manager by itself in it’s own zip file, please remove your font and try this, I linked to the one I used below.
    Then in the h4 special heading element that I tested with I added the custom class playfairdisplay-bolditalic
    2021-07-17_002.jpg
    Then I added this css in the General Styling > Quick CSS field:

    .playfairdisplay-bolditalic h4.av-special-heading-tag {
	font-family: 'playfairdisplay-bolditalic' !important;
	font-size: 60px;
        font-weight: 700;
        font-style: italic;
}

    I recommend this method over using the Theme option for Advanced Styling because it doesn’t offer the font-style option to choose italic, and in my test on a Mac with Safari the italic must be declared even though the specific font is italic, on Windows with Chrome the font renders correctly.
    Please give this a try.

    Best regards,
    Mike

    July 20, 2021 at 8:03 pm #1310928
    tiffanytnttobol

    That worked! You guys are so awesome. Thank you very much!

    July 20, 2021 at 8:45 pm #1310933
    tiffanytnttobol

    Sorry, one more thing. I am using the fullwidth slider for some mobile sections and it doesn’t seem I am getting the CSS right.

    Here is what I tried:

    .playfairdisplay-bolditalic-mobile .avia-fullwidth-slider .avia-caption-title {
	font-family: 'playfairdisplay-bolditalic' !important;
	font-size: 60px;
        font-weight: 700;
        font-style: italic;
}
    July 21, 2021 at 2:25 pm #1311152
    Mike

    Hi,
    Please try this instead:

    h2.avia-caption-title.playfairdisplay-bolditalic-mobile {
	font-family: 'playfairdisplay-bolditalic' !important;
	font-size: 60px;
    font-weight: 700;
    font-style: italic;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

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