Rally template: Custom font not loading on mobile version

Hello,

I have added a custom font to my website through CSS - it works on desktop but on mobile the font won't load although i put the codes for mobile also

p>{font-family:'Reforma1969-Blanca'}

@media screen and (max-width: 640px) 
{ p {font-family:'Reforma1969-Blanca'}}

These are the codes that i have used. Any suggestions?

@artstein

@media screen and (max-width: 640px) { 
p {
font-family:'Reforma1969-Blanca' !important;
}
}

If it doesn't work, please share site url to check.

It doesn't work still - the websites url is www.artstein.co.uk

@artstein Which elements did you use the font?

Are you sure that font worked on Desktop?

Have you declared this in CSS yet?

@font-face {
     font-family: 'Reforma1969-Blanca';
     src: url(font-url);
   }

@artstein Which elements did you use the font?

Are you sure that font worked on Desktop?

Have you declared this in CSS yet?

@font-face {
     font-family: 'Reforma1969-Blanca';
     src: url(font-url);
   }

@tuanphan

Yes I actually went over all those in CSS to make sure they were correctly declared. From the laptop that I'm working on - every font is displayed fine. But from mobile still, the h3 and body text is not reflected on but other h2 or h5 that i have created with same fonts can be seen. Very strange.

Also im checking from another desktop and in there the body text is not reflected but the rest is okay...

I was going to suggest that maybe it relates to that i have the fonts installed on my laptop but then i wouldn't be able to see other headlines that i have created also..

maybe there is another term for p or body for Rally template.. I'm very confused :))

p>{font-family:'Reforma2018-Blanca'}h3 {font-family: 'Reforma1918-Negra'; font-size: 34px; font-weight: 400;}

@media screen and (max-width: 640px) {p>{font-family:'Reforma2018-Blanca' !important;}}

@media screen and (max-width: 640px) {h3 {font-family: 'Reforma1918-Negra' !important;}}

@tuanphan Hi, I have a similar issue on a Brine template with the Grid Gallery caption on my site, in that the font is actually a Squarespace font, and it shows correctly when I use the mobile screen checking facility provided by Squarespace, but when I check on my mobile (Chrome) it does not show.  

 I have styled the Grid Gallery caption by using the following CSS:
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
  font-family: "Charlemagne Std", Times, serif!important;
  text-transform: uppercase!important;
   font-size: 25px!important;
  color:#6c777f!important;  
}

 The media query I used is as follows:

//style font on Grid images//
@media screen and (max-width: 640px) {
 .sqs-gallery-block-grid .image-slide-title {
  font-family: "Charlemagne Std", Times, serifimportant;
  text-transform: uppercase!important;
   font-size: 25px!important;
  color:#6c777f!important;  
  }}

Site name: https://turbot-armadillo-ja5c.squarespace.com/  p/word: SandraCB

Any ideas?  Thank you!