0 votes
in SoSci Survey (dt.) by s083489 (205 points)
edited by s083489

Liebes Forum,
ich versuche Custom Fonts im Layout für verschiedene Textelemente einzubinden und habe mich dabei an diese Anleitung hier aus dem Forum gehalten.

Die entsprechende Font-Datei (in meinem Fall: Inter-ExtraBold.ttf) habe ich als Mediendatei in Soscisurvey bereits hochgeladen und mittels @font-face eingebunden. Sie scheint auch erkannt zu werden (in "Fragebogen-Layouts" unter "im Layout verwendete Bilder" wird die Datei angezeigt). Wenn ich diese allerdings im Layout verwende, wird die Schriftart nicht genutzt und stattdessen durch (ich denke) Times New Roman ersetzt.

Unten stehend habe ich den HTML-Code des Layouts eingefügt. Probiert habe ich die Nutzung der Schriftart für "div.s2t-controls input" (siehe Code).

Hat jemand eine Ahnung was ich noch falsch mache bzw. wo das Problem liegen könnte?

Pretest-Link

Vielen lieben Dank im Voraus!

<!DOCTYPE html>
    <html>
    <head>
    %head%
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style type="text/css">
    body { padding-bottom: 20px }
    
    @font-face {
      font-family: myfont;
      src: url(Inter-ExtraBold.ttf);
    }
    
    div.s2t-controls { text-align: center; margin-top: 32px; }

    div.s2t-controls input { margin-bottom: 0.3em; font-family: myfont; font-size:80%; padding: 0.7em; background-color: #FFFFFF}

    div.s2t-controls button { margin-bottom: 0.3em; font-family: myfont; font-size:80%; padding: 0.7em; background-color: #FFFFFF }
    
    div.questionary { min-width: 320px; max-width: %width%; padding: 0 10px; margin: 0 auto; box-sizing: border-box}
    div#s2t-logo { margin-top: 18px }
    img.s2-logo { max-width: 100%; vertical-align: top }
    div#s2t-progress { width: 200px; float: right; margin: 0 0 20px 32px }
    .buttonControl { padding-top: 0; padding-bottom: 16px}
    div.progressbar { height: 20px; border-color: #AAAAAA;}
    div.progressbar div.progresstext { top: 1px }
    hr { height: 2px; border: 0px; background-color: transparent; border-bottom: 2px solid %color.4%; margin: 24px 0px 28px 0px; }
    a { text-decoration: none; }
    
    /* Center footer on smartphone */
    @media (max-width: 450px) {
      div#s2t-controls { text-align: center }
      div#s2t-progress { left: 0; right: 0; margin: 0 auto 10px auto; float: none }
      div#s2t-footer{ text-align: center }
    }
    
    /* No auto-zoom on iOS smartphones */
    @media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:1024px) { 
      select,
      textarea,
      input[type="text"],
      input[type="number"],
      input[type="password"] { font-size: 16px }
    }
    
    </style>
    </head>
    <body>
    <div class="questionary">
      <div id="s2t-logo">%logo%</div>
      <hr style="margin-top: 12px;">
      %form.open%
      <div id="s2t-content">
      %questionnaire%
      </div>
      <hr style="margin-bottom: 14px;">
      <div id="s2t-footer">
        <div class="s2t-controls">%button.submit%</div>    
        <div class="s2t-controls">%button.control%</div>
       <div id="s2t-progress">%progress%</div>
        %imprint%
      </div>
      %form.close%
    </div>
    </body>
    </html>
by SoSci Survey (301k points)
Posten Sie gerne mal einen Pretest-Link zu Ihrem Fragebogen, dann können wir uns das Ergebnis ansehen und was die Browser-Konsole dazu sagt.
by s083489 (205 points)
Habe einen Pretest-Link im Post eingefügt! Tausend Dank schon mal :)
by SoSci Survey (301k points)
Schwer zu sagen, warum der Browser rumzickt... Einen offensichtlichen Fehler sehe ich nicht. Aber @font-face ist da leider ein wenig anfällig. Versuchen Sie es bitte mal mit Anführungszeichen für Schriftart und Dateinamen:

@font-face {
      font-family: "myfont";
      src: url("Inter-ExtraBold.ttf");
}
div.s2t-controls input,
div.s2t-controls button { font-family: "myfont"; }
by s083489 (205 points)
Vielen Dank für Ihren Einsatz! Habe die Anführungszeichen für Schriftart und Dateinamen implementiert, leider wird der Font immernoch nicht genutzt.

1 Answer

+1 vote
by SoSci Survey (301k points)
selected by s083489
 
Best answer

In Ordnung, das war eine harte Nuss. Denn das Problem war nicht sichtbar - also tatsächlich nicht sichtbar. Sie sehen es erst, wenn Sie Ihre Code z.B. hierher kopieren: https://www.soscisurvey.de/tools/view-chars.php

Dann entdeckt man, dass vor dem @font-face ein paar unsichtbare Sonderzeichen stehen, die da nicht stehen sollten.

Screenshot

Irgendwo sind die wohl mitkopiert worden. Langer Rede kurzer Sinn: Entfernen Sie die Leerzeichen vor dem @font-face (Sie können stattdessen natürlich echte Tabs oder echte Leerzeichen einfügen). Dann funktioniert es. Hoffe ich sehr :)

by s083489 (205 points)
edited by s083489
Tausend Dank! Nun hat es funktioniert! :)

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...