Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Summary Block fonts displaying differently on mobile


MakingWaves

Question

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;
}

https://www.fionapickles.com/

Screenshot_20201203-124929_Chrome.jpg

Screenshot 2020-12-03 at 12.53.27.png

Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

try lowercase 'adobe-caslon-pro' !important

Posted Images

1 answer to this question

Recommended Posts

Create an account or sign in to comment

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


×
×
  • Create New...