Jump to content

Rally template: Custom font not loading on mobile version

Recommended Posts


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


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

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

Link to comment
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply


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;}}

Link to comment
  • 9 months later...

@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;

 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;

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


Any ideas?  Thank you!

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.