Tagged: , ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • August 9, 2021 at 1:10 pm #1315841
    CJGVD

    Dear Kriesi Support,

    Headings h1, h2 and h3 should appear in the font “Papyrus”, h4 in “Helvetica” and bodytext p in “Tahoma”. This works perfectly on large screens, like my laptop (Chrome, Firefox, Edge). However, these fonts are not shown correctly on smaller mobile devices, like tablets and mobile phones. Strangly, the developer tools of both Chrome and Firefox do display the correct fonts on smaller screens. The correct fonts are also shown in Safari (iPad). I hope you can help me solving this problem. Many thanks in advance!

    Best regards, Cornelie

    August 10, 2021 at 1:59 pm #1316067
    Yigit

    Hey,

    Thanks for contacting us!

    I just checked your website on my iphone and it loads fine on my end. I attached a screenshot in private content field below.

    Have you figured it out already? :)

    Best regards,
    Yigit

    August 10, 2021 at 5:55 pm #1316121
    CJGVD

    Hi Yigit,
    thanks for your quick reply! No, it is still not working perfectly. Obviously Safari can cope with the different font types, and on desktops also Chrome, Firefox and Edge show the fonts correctly. Only on Android tablets and mobile phones the heading font (esp. Papyrus, because this will be the main heading font) is not shown…! Hope you have any idea what could cause it and what could be done. Thanks for your help!
    Best regards, Cornelie

    August 12, 2021 at 4:49 am #1316347
    Rikard

    Hi Cornelie,

    Thanks for the update. I’m guessing that the fonts in question are not installed on the devices where they are missing, could you try to download the fonts in question, and upload them to your server please? After that we can try to help you out with some custom CSS.

    Best regards,
    Rikard

    August 12, 2021 at 10:31 am #1316405
    CJGVD

    Hi Rikard,

    thanks for your suggestion! I am not familiar with uploading files to a server. So I would be greatful for any hints on how/where to do that.

    We host our website at all-inkl.com. Would this be the place to upload the font “Papyrus”? Although the font type is already in your standard fonts for Enfold and is shown correctly on all large screens and on all devices with Apple software. So I assume the font is already in the fonts folder on the server, or am I wrong..?

    Android tablets and mobile phones do not seem to have installed Papyrus on default (we tried several Sony, Samsung, Huawei devices). How to make sure they do? Since I assume you did not mean to install the font manually on each device separately.

    Thanks in advance for any further hints! Looking forward to learn… ;-)

    Best regards, Cornelie

    August 12, 2021 at 2:38 pm #1316458
    CJGVD

    Small addition: I installed Chrome, Firefox and Microsoft Edge on a Huawei tablet, and none of these mobile browsers were capable of showing the Papyrus font correctly. (However, still I don’t know which steps exactly are needed to make them do… Thanks for your help!)

    August 14, 2021 at 4:23 am #1316694
    Rikard

    Hi,

    Thanks for the update. The web safe fonts are not included in the theme, they are displayed from the actual device. That means that it won’t work if the font in question is not actually installed on the device in question. I’m not sure if the Papyrus font is free to be downloaded, but if it is, then please save it to your local computer, then upload it to your server using FTP software. We can help you out with this if you provide us with the font, and FTP login details in private.

    Best regards,
    Rikard

    August 16, 2021 at 9:16 am #1316919
    CJGVD

    Thanks, Rikard, for your reply!
    Good to know, that the web safe fonts are not included in the theme. Now the steps to be taken are making sense to me. :-) I will get in touch again in case of more questions or help needed.
    Best regards, Cornelie

    August 17, 2021 at 4:32 am #1317033
    Rikard

    Hi,

    Thanks for the update. We’ll leave this thread open for you, if you should need any further help from us.

    Best regards,
    Rikard

    August 20, 2021 at 12:56 pm #1317629
    CJGVD

    Dear Rikard,

    unfortunately, I need your help again… :-S

    We baught the license for our Papyrus font at Linotype and downloaded the respective Webfont-Kit for Latin 1. For integration within WP we used the following guidelines of Linotype:

    1. Extrahieren Sie aus dem ZIP-Archiv des Webfont-Pakets die Datei demo.css und das Verzeichnis Fonts
    2. Finden Sie in Ihrem WordPress-Installationsverzeichnis den css-Ordner für Ihr derzeit verwendetes Thema
    Beispiel: wp-content/themes/twentyfifteen/css/
    3. Laden Sie die Datei demo.css und das Verzeichnis Fonts aus Schritt 1 in diesen Ordner hoch
    4. Melden Sie sich in Ihrem WordPress Dashboard als Admin an
    5. Klicken Sie im Bereich Design auf die Option Editor
    6. Wählen Sie aus der Dateiliste in der rechten Spalte „Header (header.php)“
    7. Fügen Sie zwischen den Tags <head> und </head> folgende neue Zeile ein:
    <link rel=”stylesheet” href=”<?php echo esc_url( get_template_directory_uri() ); ?>/css/fonts.css”>
    8. Klicken Sie auf Datei aktualisieren.

    In step 2-3 we uploaded the fonts.css in wp-content/themes/enfold/css (please note that we also work with the Enfold Child Theme, but we did not find a directory “css” here, so we used the parent theme). In this css-directory we also created the folder “fonts” as well as its sub-folder “883327”: wp-content/themes/enfold/css/fonts/883327/ and here we uploaded the two font files WOFF and WOFF2.

    In Step 5-7 we added this line in the header.php from Enfold Parent.

    Unfortunately these steps did not result in showing the Papyrus font on our Android mobile devices.

    Next we copied the fonts.css contents directly in the Quick CSS-field of our Child Theme Options, including a reference of h1-h6 to the Papyrus font-family, but all this did not work either.

    Probably we did something wrong… Hope you see our mistake.

    FYI: For tracking the pageviews by Linotype an empty CSS-file on Linotypes server is being used. There are two options for pageview tracking, we want to try the first option @import-Methode first (and in case of non-satisfaction, try the second one with Asynchrone javaScript Methode). The first option should work as follows:

    Die Tracking-CSS-Datei wird über das @import-Tag in der Schriften-CSS-Datei aufgerufen. Sie müssen nur die Datei demo.css in Ihre Seiten einbinden.
    Bei dieser direkten Methode wird der Seitenaufbau erst fortgesetzt, wenn die Tracking-CSS-Datei geladen ist. Sollten Sie Sorge haben, dass die Server von linotype.com nicht schnell genug antworten, können Sie die technisch alternative, asynchrone Methode benutzen.

    Also: Linotype indicates that the webserver configuration should be right and the fonts need to be protected (see below), but we don’t understand what is meant or what should be done.

    Werbserver-Konfiguration und Absicherung der Schriften
    Damit Ihr Webserver die Webfonts richtig ausliefert, kann es nötig sein, die Konfiguration anzupassen.
    Es kann je nach Umgebung erforderlich sein, den Server so zu konfigurieren, dass ein „access-control-allow-origin“-Header gesendet wird. Weitere Informationen finden Sie unter Mozilla Developer Network und W3C Cross-Origin Resource Sharing
    In der Standardkonfiguration einiger Webserver, hier vor allem der IIS, fehlt für einige oder alle Webfonts die Zuweisung der passenden MIME types, so dass diese nachgetragen werden müssen. Wir empfehlen, alle Webfonts mit dem MIME type „application/octet-stream“ auszuliefern. So erreichen Sie die beste Kompatibilität mit den verschiedenen Browsern.
    Die Lizenzbestimmungen verpflichten Sie, angemessene Sicherheitsmaßnahmen zu ergreifen, damit Ihre Webschriften nicht missbräuchlich benutzt werden. Teil dieser Sicherheitsmaßnamen sind die kryptischen Schriftnamen, die deswegen erhalten bleiben müssen. In den Beispiel-Dateien werden diese Namen richtig referenziert.
    Darüber hinaus muss der Webserver so konfiguriert sein, dass man die Webschriften nicht einfach über die Eingabe einer URL im Browser oder ein wget-Kommando herunterladen kann (sogenannte „Hotlink Protection“). Außerdem muss sichergestellt sein, dass die Schriften nicht von fremden Seiten aus verlinkt werden können.

    Sorry, for the long mail, but I wanted to provide you with as many details as possible to hopefully find out the problem.

    Many thanks in advance for your help!

    Best regards, Cornelie

    August 22, 2021 at 4:37 am #1317784
    Rikard

    Hi,

    Thanks for the update. Could you give us WordPress and FTP access in private, so that we can have a closer look please?

    Best regards,
    Rikard

    August 22, 2021 at 1:26 pm #1317820
    CJGVD

    Access details were sent in private. Thanks for your help!

    August 23, 2021 at 2:37 pm #1317975
    Rikard

    Hi,

    Thanks for the update, I can’t see any login details in this thread though. Please try sending them again, and make sure that you write something in the public box as well.

    Best regards,
    Rikard

    August 23, 2021 at 6:48 pm #1318029
    CJGVD

    Dear Rikard,

    Sorry to hear, that the login details were not sent properly. Hope they will be visible in the private part now.

    Thanks a lot for your help!

    Best regards,
    Cornelie

    August 25, 2021 at 4:00 am #1318190
    Rikard

    Hi Cornelie,

    Thanks for that. The WordPress login details are working, but the FTP login details are not. Please check and verify the FTP login details, and send them again.

    Best regards,
    Rikard

    August 25, 2021 at 8:08 am #1318240
    CJGVD

    Hi Rikard,
    that’s very frustrating. I just checked the FTP login details in my last message and they seem to work. I will provide you with my login as well, hope this works.
    Best regards, Cornelie

    August 27, 2021 at 4:24 am #1318530
    Rikard

    Hi,

    Thanks for that, the FTP details are working now.

    I changed the CSS to the following, and the fonts are working on mobile now as well:

    @font-face{
        font-family: "Papyrus W01";
        src:url("https://yoursite.ch/wp-content/themes/enfold/css/fonts/883327/01fb9a9b-55ce-4693-b692-bd99b3c70400.woff2") format("woff2"),url("https://yoursite.ch/wp-content/themes/enfold/css/fonts/883327/2fe0bd0f-bd5a-4ed4-8c63-1876362fdf8c.woff") format("woff");
}

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

    Please review your site.

    Best regards,
    Rikard

    August 27, 2021 at 11:10 am #1318615
    CJGVD

    Dear Rikard,

    yes, it works! Thanks so much for your help!

    So if I understand correctly, the only mistake I made was that in Quick CSS after scr:url the part “https://yoursite.ch/wp-content/themes/enfold/css/&#8221; before “fonts/…”) was missing.

    Thank you, you made my day!

    Best regards, Cornelie

    August 29, 2021 at 10:22 am #1318826
    Rikard

    Hi Cornelie,

    Yes, the only problem was the path to the files in question. I added the full URL, and it worked after that.

    Best regards,
    Rikard

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