Jump to content

Why is my font larger on different browsers, ie. Safari

Recommended Posts

Site URL: https://beagle-tangerine-ex9m.squarespace.com/

Hi there,

My fonts are showing up much bigger across my entire website when opened in Safari. I'm using a mixture of text boxes and markdown boxes and both are effected. The fonts are from squarespace, Lato and Oswald. 

 

 

My site password is: digitalnative

 

 

I've attached examples of the font on Google Chrome and Safari.

1263440131_Screenshot2020-12-10at11_13_04.thumb.png.d8db6bf4c0284ed8215e9dbf7a66c5f5.png5942705_Screenshot2020-12-10at11_13_11.thumb.png.c0d76768d3208f07e5596ca4991c248f.png

 

Link to comment
  • Replies 8
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

I'm having a similar issue of sorts, except mine is that wherever I have something set to an italic, in safari only it goes EXTRA italic, to the point that it looks distorted and it completely changes the spacing. I've never had this issue before and honestly have no idea how to fix it. Anyone have an ideas?

Link to comment
  • 1 year later...

hi @tuanphan

I know this is an old post, but I was wondering if you were able to help?

I have a similar issue. When editing (in safari) the (SQ) fonts look like they should - including in the preview. But when I publish the font's are too big in safari. They look fine in Chrome.

check the screenshot:
- bottom left = preview in edit modus - safari
- top left = after publishing - safari
- far right = after publishing - chrome

I have this throughout the entire site (example https://grasshopper-flamingo-5a5p.squarespace.com/filosofie

 

I've set the base font size to 16px. Headings and paragraphs are set in rem.

Any idea what could be the problem?

 

Thanks in advance.

 

Cheers, Rob

Screenshot 2022-01-08 at 19.50.10.png

Link to comment
  • 2 years later...

@iamRob hi! i'm also dealing with the same issue. i just looked at your site on safari and chrome and they look the same now, so i'm assuming you figured out how to solve this problem -- can you share what you learned? how did you fix the size issue? thank you. 

Link to comment
On 3/21/2024 at 11:48 AM, shann0nm said:

@iamRob hi! i'm also dealing with the same issue. i just looked at your site on safari and chrome and they look the same now, so i'm assuming you figured out how to solve this problem -- can you share what you learned? how did you fix the size issue? thank you. 

You can use some CSS code like this (Website > Website Tools > Custom CSS) to set fixed size on mobile

@media screen and (max-width: 767px) {
    h1 {
        font-size:35px
    }

    h2 {
        font-size: 24px
    }

    h3 {
        font-size: 18px
    }

    p {
        font-size: 16px
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
On 4/22/2024 at 5:34 PM, GeorgieMasonStudio said:

I'm also having the same issue. Screenshots attached.  Fonts and spacing much bigger on published site. Tried the coding suggested above and nothing happened, but I'm a newbie coder so may not have inputted it correctly. Any help much appreciated 🙂

Screenshot 2024-04-22 at 10.43.32.png

Screenshot 2024-04-22 at 10.43.40.png

Screenshot 2024-04-22 at 10.53.25.png

Screenshot 2024-04-22 at 10.53.41.png

Can you share link to pages in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.