Ich würde gerne die Schriftart in dem gesamten Projekt ändern. Dafür habe ich die Schriftart bereits als .ott unter Mediendateien hochgeladen. (Alternativ habe ich es auch als .woff versucht.)
Dann habe ich im Fragebogen-Layout mittels HTML probiert die Schriftart anzuwenden. Der Code wirft keine Fehler aber die Schriftart wird nicht angewendet. Was muss ich ändern damit es funktioniert?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
%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">
/* Import Manrope font */
@font-face {
font-family: 'Manrope';
src: url('Manrope-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Manrope', sans-serif;
padding-bottom: 20px;
margin: 0;
}
/* Question styling */
.s2question {
position: relative;
padding-left: 20px; /* space for the line */
margin-bottom: 32px !important;
}
.s2question::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: #00008C;
}
/* Container */
div.questionary {
min-width: 320px;
max-width: %width%;
padding: 0 10px;
margin: 0 auto;
box-sizing: border-box;
}
/* Logo */
div#s2t-logo {
margin-top: 18px;
}
img.s2-logo {
max-width: 100%;
vertical-align: top;
}
/* Progress */
div#s2t-progress {
width: 200px;
float: right;
margin: 0 0 20px 32px;
}
div.progressbar {
height: 20px;
border-color: #AAAAAA;
}
div.progressbar div.progresstext {
top: 4px;
}
/* Footer & buttons */
.buttonControl {
padding-top: 0;
padding-bottom: 16px;
}
/* Horizontal lines */
hr {
height: 2px;
border: 0;
background-color: transparent;
border-bottom: 2px solid %color.4%;
margin: 24px 0 28px 0;
}
/* Links */
a {
text-decoration: none;
}
/* Center footer on small screens */
@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;
}
}
/* Prevent iOS auto-zoom */
@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 id="s2t-progress">%progress%</div>
<div id="s2t-controls">
%button.control%
</div>
<div style="margin: 80px 0; text-align: left;">
<img src="DVRlogopng.png" style="max-width: 15%; vertical-align: middle;">
<img src="TUD_VPSY-Logo-farbig.svg" style="max-width: 15%; vertical-align: middle;">
</div>
%imprint%
</div>
%form.close%
</div>
</body>
</html>
