Reputation: 11
Is there any way to change the font-family of the prompt-text in a AMP Web Stories quiz? I tried so many things in CSS and it does work... I could make it with colors and other atributtes, but not this...
Screenshot of the quiz part where I want to change the font to match our style guide
And I took most of the code here.
This is the HTML file. How will you try it just with CSS?
<!-- Slide 3 question-->
<amp-story-page id="page3">
<amp-story-grid-layer template="fill">
<amp-img style="opacity:0.7"
layout="fixed" width="1600" height="1200"
src="AdobeStock_247667133.jpeg"
alt="..." />
</amp-story-grid-layer>
<amp-story-grid-layer template="fill" aspect-ratio="4:6">
<div animate-in="scale-fade-up">
<amp-story-interactive-quiz
class="quiz center h2"
prompt-text="Is this waterfall real?"
endpoint="https://amp.dev/documentation/examples/components/amp-story-interactive-poll/results"
prompt-size="large"
option-1-text="Yes" option-1-correct option-1-confetti
option-2-text="No">
</amp-story-interactive-quiz>
</div>
</amp-story-grid-layer>
</amp-story-page>
I tried to add CSS for prompt-text and even other tags...
I wanted to add this font-family
"Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
<style amp-custom>
amp-story {
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
amp-story-page {
background-color: #000;
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, .h1 {
font-size: 3.3rem;
letter-spacing: -0.02em;
color: #fff !important;
}
h2, .h2 {
font-size: 2rem;
color: #fff;
}
.prompt-text {
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p {
font-weight: 400;
letter-spacing: -0.35px;
line-height: 1.6;
color: white;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 22em;
font-size: 0.4em;
}
.quiz {
--interactive-prompt-background: linear-gradient(10deg, white, #009EDB);
--interactive-accent-color: grey;
}
#results-1 {
--interactive-prompt-text-color: white;
--interactive-accent-color: linear-gradient(10deg, white, #009EDB);
} <strong></strong>
</style>
Upvotes: 1
Views: 35