Summary Block fonts displaying differently on mobile

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/

try lowercase

'adobe-caslon-pro' !important

Late response but this actually worked perfectly thanks. I changed to all lowercase and added hyphens. Mobile displays correctly now. Big thanks Tuan.