Jump to content

Summary Block fonts displaying differently on mobile

Recommended Posts

Site URL: https://www.fionapickles.com/

Hey everyone.

I've added this css to change the title and category fonts for my summary blocks. Each font displays perfectly on all screen sizes when viewed through Squarespace, but now the site is live, when viewed through the browser on mobile (Chrome in my instance) the fonts don't show correctly.

It's only Adobe Caslon Pro so assuming this isn't the problem? First photo is how fonts display on mobile (incorrectly) and the second is how they display through Squarespace account (correctly). Any ideas? Thanks in advance.

/* Summary Block Title */
.summary-title-link {
    font-family: 'Adobe Caslon Pro'!important;
  text-transform: uppercase !important;
  font-size: 15px;
  letter-spacing: .07em;

/* Summary Block category */
.summary-metadata-item a {
    font-family: 'Adobe Caslon Pro';
  text-transform: sentence case;
  font-size: 14px;
  font-style: italic;
  line-height: 1.8em;
  color: #b36847;
  letter-spacing: .05em;



Screenshot 2020-12-03 at 12.53.27.png

Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 11 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.