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

Font displays differently on different browsers


Recommended Posts

Posted (edited)

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 post
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

Posted Images

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 post
  • 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 post
  • 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 post
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...