katecreates

Website: https://www.gerards.com.au/ The H1 font that appears on each page is correctly displaying on desktop but when I look at it on mobile it seems like it's reverting to a standard web font. I have custom-css to be able to italicise one word in the heading and I think it may be affecting the fonts on mobile? I have attached screenshots of how it displays on mobile and then on the mobile editor in squarespace. Below is some of the custom-css being used that might affect it. Any help/leads greatly appreciated! /* Custom H1 font */ h1 { font-family: 'Sofia Pro', sans-serif; /* Replace 'Sofia Pro' with the font name or font URL */ font-size: 3.3rem; /* Adjust the font size as needed */ font-weight: 100; /* Adjust the font weight as needed */ line-height: 1.2; letter-spacing: 4px; /* Add other styles like text-decoration, line-height, etc., as needed */ } /* H1 - custom SCRIPT font */ @font-face { font-family: 'Kepler Std - Light Italic Subhead'; src: url(https://static1.squarespace.com/static/64f14d71007fdf30ed5bb73e/t/651120a27d1b36370e0e436c/1695621283153/Kepler+Std+-+Light+Italic+Subhead.otf); } h1 em { font-family: 'Kepler Std - Light Italic Subhead' !important; /* Add any other styles you want for the italicized word here */ } /*Mobile Font Sizes*/ @media only screen and (max-width: 800px) { h1 { font-size: 36px !important; } h2 { font-size: 20px !important; } h3 { font-size: 12px !important; } h4 { font-size: 8px !important; } .sqsrte-large { font-size: 12px !important; } p { font-size: 12px !important; } .sqsrte-small { font-size: 10px !important; } pre { font-size: 10px !important; } }