Change tagline symbols

Hi @ayoungerskin.

Thank you for contacting us.

A bit of CSS can make that change, please add it to Appearance -> Customize -> Additional CSS:

.tagline p::before, .tagline p::after {
	border-top: none;
	border-bottom: none;
}
.tagline {
	font-family: 'Lato';
}

Hope this helps.

Kind regards.

Thank you it worked! IS there any other font names I can try? ??

Also, If I were to want to use the symbol “-” in front of the tagline, how could I insert that? ??
Best regards
Ann

And one more question ?? I would like the tagline on mobile devices to be a little smaller, 20 px. How can I set it up so it is just that size on mobile devices ?? ?

Thank you so much!!

You can try other fonts, so-called “Web Safe Fonts” – https://www.w3schools.com/cssref/css_websafe_fonts.asp and also those Google fonts already in the theme – Montserrat and Lato. Or you can install some plugin that will allow you to use any of 600+ Google fonts. ??

For the “-” in the tagline try this CSS:

.tagline p::before, .tagline p::after {
	content: "-";
	top: 10%;
	border-top: none;
	border-bottom: none;
}

And finally for 20px tagline in mobile mode:

@media (max-width: 480px) {
       .tagline { font-size: 20px; }
}

Kind regards.

Thanks alot!
The last one didn’t work though :-/

Oh now it did ??