How to edit your mobile title font using CSS in Squarespace 7.1

When editing your site title, to have the same font show on mobile you need to specify for that screen size to have that font.

This post may contain affiliate links, which means I’ll receive a commission if you purchase through my link, at no extra cost to you. Please read full disclosure here.

 

Code:

//Mobile title fancy font

@media screen and (max-width:640px) {

#site-title {

font-family: ‘la-bohemienne’, !important;

}

}

You can see from the example above the chosen font in this example La Bohemienne, you’ll need to write the font in a way that it can be understood in the code editor, which is like this ‘la-bohemienne’. in this example.

It’s worth testing how your website looks on an actual mobile device to confirm you are happy with the styling.