Font displays differently on different browsers

I am having some issues with a font (Proxima Nova Condensed) displaying differently on different computers and browsers. My teammate and I are both on Macs version 10.15.4 with all browsers up to date. 

Here's the goal:

With the css like this, it works perfectly on my computer (chrome and firefox) but shows up with regular weight and not condensed on my teammates computer. It also has regular weight and is not condensed when I use safari. 

Safari version:

When I change the code to this:

It works on all of my browsers but shows up with a regular font weight rather than thin. Adding !important to font-weight didn't change anything. Any help is greatly appreciated! Ideally we'd like to use Proxima Nova Condensed Thin. 

This font from Squarespace Font or Custom Font?

Squarespace Font

Update: I developed a work-around to get all the fonts to display correctly. First I changed all header fonts to Proxima Nova Condensed with a font-weight of 200px. Then I changed h2, h3, and h4 back to Proxima Nova with a font-weight of 600px using CSS. So far this has been the only way I've been able to get a thin Proxima Nova Condensed font to show up on Chrome, Firefox, and Safari.

If anyone knows a better way of doing this, I'm all ears!

On 5/21/2020 at 6:25 PM, MMCAC said:

Update: I developed a work-around to get all the fonts to display correctly. First I changed all header fonts to Proxima Nova Condensed with a font-weight of 200px. Then I changed h2, h3, and h4 back to Proxima Nova with a font-weight of 600px using CSS. So far this has been the only way I've been able to get a thin Proxima Nova Condensed font to show up on Chrome, Firefox, and Safari.

If anyone knows a better way of doing this, I'm all ears!

Not sure if you found a solution. Ran into this issue myself and found the solution. Make sure that your CSS says 'proxima-nova-condensed' instead of 'proxima nova condensed' as in the example below because CSS does not recognize the font otherwise.

h4 {
  font-family: 'proxima-nova-condensed';
  font-size: 28px;
  color: #202020;
  font-weight: 500;
  line-height: 1.4em;
    }

Similar question:

I'm trying to change the summary block titles to Adonis, and it works great on my desktop, but when I check on both Chrome and Safari on my laptop, it shows up like this:

Here is the code I'm using:

.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: Adonis;
font-weight: 600;
font-size: 30px !important;
text-transform: none;
font-style: none;
 } }

Would love any input!  Thanks!

36 minutes ago, stanleycreativeco said:

Similar question:

I'm trying to change the summary block titles to Adonis, and it works great on my desktop, but when I check on both Chrome and Safari on my laptop, it shows up like this:

Here is the code I'm using:

.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: Adonis;
font-weight: 600;
font-size: 30px !important;
text-transform: none;
font-style: none;
 } }

Would love any input!  Thanks!

Adonis is custom font or Squarespace font?

On 11/19/2020 at 2:20 AM, tuanphan said:

Adonis is custom font or Squarespace font?

@tuanphan Just found this thread and I’m having a similar issue: none of my Squarespace fonts are displaying on Internet Explorer, only my custom fonts. Do you have a fix??

Site URL: https://cyan-teal-3zmw.squarespace.com/

Password: governance

The issue of fonts and custom css displaying differently on Safari/Firefox/Chrome is frustrating.

It's been happening for years without any resolution.

On 3/29/2021 at 8:07 PM, dvgdvgdvg said:

@tuanphan Just found this thread and I’m having a similar issue: none of my Squarespace fonts are displaying on Internet Explorer, only my custom fonts. Do you have a fix??

Site URL: https://cyan-teal-3zmw.squarespace.com/

Password: governance

Hi. Which elements do you have problem?

On 4/10/2021 at 3:55 AM, tuanphan said:

Hi. Which elements do you have problem?

All instances of Squarespace-provided fonts, which on my site includes all default H4 text and CTAs/buttons (font = Brandon Grotesque) as well as all body text (font = Artigo). They are defaulting to what looks like Times New Roman or similar. Screengrab of an example attached. The only font displaying correctly in Internet Explorer, according to Safari's Responsive Design Mode preview, is the custom one I've uploaded and added to my CSS with @font-face ("BrandonTextWeb-Bold") for my H1/H2/H3.

To stop this happening make sure in your CSS you have font-weight: normal and font-style: normal in your @fontface code block.