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

Font displays differently on different browsers


Recommended Posts

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:


chrome - this is the goal.png

 

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:

safari.png

 

When I change the code to this:


chrome - version 2.png

 

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. 

Edited by MMCAC
moving pictures around
Link to comment

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!

Link to comment
  • 3 months later...
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;
    }

Link to comment
  • 2 months later...

Similar question:
1047603675_ScreenShot2020-11-19at8_39_20AM.thumb.png.b515f302c20fa03394cdd17dea755dff.png
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!

Link to comment
36 minutes ago, stanleycreativeco said:

Similar question:
1047603675_ScreenShot2020-11-19at8_39_20AM.thumb.png.b515f302c20fa03394cdd17dea755dff.png
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
  • 2 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

internet-explorer-font-display.png

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...