Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 12, 2021 at 11:47 am #1293911
    westefan

    Hi,
    the font style of product loop on https://cbd-bluetenwunder.shop/cbd-produkte/ is not displayed correctly on mobile: font family (font is uploaded and embedded via Enfold), font weight, centered price look different.
    What can be the cause and what’s the solution?
    Thanks, Stefan

    April 14, 2021 at 6:29 am #1294244
    Rikard

    Hi Stefan,

    Could you post a screenshot highlighting the problem please? Also let us know in which browser and device you are seeing the results you are getting.

    Best regards,
    Rikard

    April 14, 2021 at 8:25 am #1294270
    westefan

    Hi Rikard,
    it occurs in Safari browser on Apple iPhone.
    Mobile display with wrong CSS
    Thanks for your efforts!
    Stefan

    April 16, 2021 at 5:33 am #1294679
    Ismael

    Hi,

    Thank you for the inquiry.

    How did you add the “bergen” font, and where did you get the font file? Please provide the font URL in the private field.

    Best regards,
    Ismael

    April 16, 2021 at 8:42 am #1294729
    westefan

    Hi Ismael,
    we uploaded the font zip-file to WordPress media und added it at Enfold child theme options – Import/Export – Font manager
    We’ve licenced it here https://graphicriver.net/item/bergen-sans-font/25507144
    Thanks
    Stefan

    April 19, 2021 at 5:42 am #1295083
    Ismael

    Hi,

    Thank you for the info.

    Can we have access to the font? We would like to check the files and test it on our own installation. Please post the info in the private field.

    Is it displaying properly when the Performance > File Compression settings are disabled?

    Best regards,
    Ismael

    April 19, 2021 at 9:31 am #1295183
    westefan

    Hi,
    no, disabling file compression doesn’t change anything.
    Find the font in the private field.
    Thanks, Stefan

    April 21, 2021 at 5:53 am #1295672
    Ismael

    Hi,

    Thank you for following up.

    It is not working properly because the font format is .otf. You can actually confirm it by checking the wp-content/uploads/avia_fonts/bergen folder. It will be empty.

    Please try to download the .ttf versions of the font files, then upload the font set again.

    Best regards,
    Ismael

    April 21, 2021 at 10:32 am #1295749
    westefan

    Hi Ismael,

    as the font is not available as TTF on Graphicriver I converted the OTF files to TTF and uploaded the font set again (now the folder contains the fonts). But this was not the solution. But: If I change the font-family in CSS to another uploaded font (e.g. Roboto) it works.

    And: the price is still not centered. Could it be that the CSS directive is i!important?
    .inner_product_header .price { text-align: center !important;}

    Thanks again
    Stefan

    April 22, 2021 at 12:14 pm #1296019
    Ismael

    Hi,

    Have you tried adding the font using @font-face instead of uploading it in the font manager? The font manager is originally created for Google Fonts, so it is possible that it is not able to process the custom font properly.

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

    Best regards,
    Ismael

    April 22, 2021 at 12:33 pm #1296028
    westefan

    Hi,
    thank you for the tipp. I will try it later. So if you want you can close the thread.
    Best regards
    Stefan

    April 23, 2021 at 10:08 am #1296261
    Nikko

    Hi Stefan,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘CSS font style not transferred to mobile display’ is closed to new replies.