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>