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

Custom font not working on mobile/iPad


PennyVozniak

Question

Site URL: https://www.pennyvozniak.com/

Hello everyone,

I added Arial Narrow and Vendor fonts in the custom CSS panel. Looks like this:

 

@font-face {
font-family: 'vendor';
src: url('https://static1.squarespace.com/static/5fcc32ac190b057dd3728887/t/5fcdd4a35d2e6f3bda5e7454/1607324836889/font.woff'); }

h1 {font-family: 'ArialNarrow';}
h2 {font-family: 'Vendor';}
h3 {font-family: 'ArialNarrow';}
h4 {font-family: 'ArialNarrow';}
p {font-family: 'ArialNarrow';}

The design is correct on the desktop version, but on my phone and iPad the font for the body text is not Arial Narrow, it's another serif font that I didn't select. However, Vendor came across fine on the mobile site. Strange...

Any ideas how I can fix this so that the body text (Arial Narrow) is the same across all screens?

Also, I would like the text underneath the gallery images to be Arial Narrow, but I can't seem to change that font at all. Any advice for this too would be fab. 

Thank you!

Penny

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

7 answers to this question

Recommended Posts

  • 0

I'm answering my own question here. 

 

Figured it out. I had the code all wrong. This is working:

 

@font-face {
font-family: 'vendor';
src: url('https://static1.squarespace.com/static/5fcc32ac190b057dd3728887/t/5fcdd4a35d2e6f3bda5e7454/1607324836889/font.woff'); }

h2 {font-family: 'Vendor';}


@font-face {

    font-family: 'ArialNarrow';

       src: url('https://static1.squarespace.com/static/5fcc32ac190b057dd3728887/t/5fcc6f752fa8bc6bcde12072/1607233399408/arialn.ttf');

  }

h1 {font-family: 'ArialNarrow';}
h3 {font-family: 'ArialNarrow';}
p {font-family: 'ArialNarrow';}
h4 {font-family: 'ArialNarrow';}

 

Still would like an answer for the gallery image captions... if anyone knows how to change these fonts...

 

P

Link to post
  • 0

I'm having the same issue. When I view the mobile version in the editor the fonts show up, but when viewing on an actual phone using different browsers the fonts are not appearing correctly. I'm specifically having trouble with summary block fonts. Attached screenshots below.

The website is driplab.coffee
password: dripdrip

IMG_4004.jpg

Screen Shot 2021-02-07 at 6.48.21 PM.png

Link to post
  • 0
6 hours ago, simkrys said:

I'm having the same issue. When I view the mobile version in the editor the fonts show up, but when viewing on an actual phone using different browsers the fonts are not appearing correctly. I'm specifically having trouble with summary block fonts. Attached screenshots below.

The website is driplab.coffee
password: dripdrip

IMG_4004.jpg

Screen Shot 2021-02-07 at 6.48.21 PM.png

It looks like you haven't declared font-face for 'BC Novatica CYR' !important yet?

Link to post
  • 0

thanks for the reply @tuanphan. not sure where I should declare it? 

I currently have this

.sqs-block-summary-v2 .summary-metadata-item {
  font-family: 'BC Novatica CYR' !important;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 190%;
letter-spacing: 1px;
text-transform: uppercase;
  color: #000;
}
.sqs-block-summary-v2 .summary-title {
  font-family: 'BC Novatica CYR' !important;
font-style: normal;
font-weight: normal;
font-size: 31px;
line-height: 120%;
}

 

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