My custom font doesnt work

Hi @sergiodealarcon, thanks for reaching out to us. I see that you’ve inserted it in your quiz’s CSS and it’s being rendered correctly:

/* Adding a custom font, you'll have to host the font in your server */
@font-face {
font-family: 'Montserrat', sans-serif !important;
src: url("https://winkanteojos.com/wp-content/themes/astra-child/fonts/Montserrat-Bold.ttf") format("ttf");
);
}
.builder-container-preview h1, .builder-container-preview h2, .builder-container-preview h3, .builder-container-preview h4, .builder-container-preview h5, .builder-container-preview h6, .widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6, .lq-quiz p{
  font-family: 'Montserrat', sans-serif !important;
}

I’m writing you via email to send you a screenshot of how it’s being rendered on my end.

Hi @revenuehunt !! Indeed it is rendering, but only on desktop, not on mobile, I can’t seem to find the issue…

Have you tried importing it from Google Fonts instead of hosting it in your server?

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,700;1,300&display=swap');

• This reply was modified 3 years, 5 months ago by RevenueHunt.

Just did and still nothing on mobile, its really weird…

this is my css:

/* Adding a custom font, you'll have to host the font in your server */
@font-face {
font-family: 'Montserrat', sans-serif !important;
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,700;1,300&display=swap');
);
}
.builder-container-preview h1, .builder-container-preview h2, .builder-container-preview h3, .builder-container-preview h4, .builder-container-preview h5, .builder-container-preview h6, .widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6, .lq-quiz p{
  font-family: 'Montserrat', sans-serif !important;
}

is it ok?

Try doing it this way, without the font face rule:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,700;1,300&display=swap');

.builder-container-preview h1, .builder-container-preview h2, .builder-container-preview h3, .builder-container-preview h4, .builder-container-preview h5, .builder-container-preview h6, .widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6, .lq-quiz p{
  font-family: 'Montserrat', sans-serif !important;
}

Also, once you’ve saved the quiz, exit the app and refresh your browser’s cache, or access the quiz from a private browser.

I already added the code to your quiz and it’s working OK on my end.

You are amazing! It works!!!! Thanks a lot!!!