Responsive H1 in Header Element

Hi there,

instead of using inline styles and the bold tag in your H1 element ... do this:

<h1 class="hero-heading">My title</h1>

And add this CSS:

h1.hero-heading {
    font-size: 70px;
    font-weight: bold;
}
@media (max-width: 768px) {
    h1.hero-heading {
        font-size: 40px;
    }
}

Ok, I also added font face "work sans" into the element.

Should I add "font-face: work sans;" to the css too?

That code is not valid HTML - there is no <font face> tag. Its currently being ignored amd using the Muli font you have set in the Customizer for the H1.

you would need to use the:

font-family: 'work sans';

property in your CSS.

But if you haven't selected Work Sans as a font in the customizer for any particular element then the font will need to be imported/enqueued first. This article explains the various methods:

https://www.cloudways.com/blog/how-to-use-google-fonts-with-wordpress/

All set. Thanks

You're welcome