Mobile Custom Site Text - Not Working

Site URL: https://rae-mercer.squarespace.com/

Hello! 

I'm having trouble getting my custom font to show up across mobile. 

Website: https://rae-mercer.squarespace.com/

CSS: 

@font-face {
font-family: 'Romie-Regular';
src: url('}https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6b6ab0e0e95980f183ec/1621912426669/Romie-Regular.woff');
  }
@font-face {
font-family: 'MonumentExtended-Regular';
src: url('}https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6babcd97d34548e128a7/1621912491471/MonumentExtended-Regular.woff');
  }

h1 {font-family: 'Romie-Regular';}
h2 {font-family: 'Romie-Regular';}
h3 {font-family: 'Romie-Regular';}
h4 {font-family: 'Romie-Regular';}

p {
  font-family: 'MonumentExtended-Regular';
  font-weight: 100;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 2em;}

h1.entry-title {
    font-family: 'Romie-Regular' !important;
}
h2.newsletter-form-header-title {
    font-family: 'Romie-Regular' !important;
}

.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
button.newsletter-form-button.sqs-system-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.blog-item-title h1.entry-title {
    font-family: 'Romie-Regular' !important;
}

/* blog title font */
h1.blog-title, h1.entry-title, a.summary-title-link {
    font-family: 'Romie-Regular' !important;
}

Thanks in advance!

Hello there,

Taking a look at your website, I can see the font on some elements. Taking a look at the code you provided, I see that there are some errors in your "font-face" calls. Try replacing them with this:

@font-face {
font-family: 'Romie-Regular';
src: url('https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6b6ab0e0e95980f183ec/1621912426669/Romie-Regular.woff');
  }
@font-face {
font-family: 'MonumentExtended-Regular';
src: url('https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6babcd97d34548e128a7/1621912491471/MonumentExtended-Regular.woff');
  } 

Your original code had a "}" before the URL of the font. Hope this helps!

-Dan

On 5/28/2021 at 1:16 AM, britterdiamond said:

Site URL: https://rae-mercer.squarespace.com/

Hello! 

I'm having trouble getting my custom font to show up across mobile. 

Website: https://rae-mercer.squarespace.com/

CSS: 

@font-face {
font-family: 'Romie-Regular';
src: url('}https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6b6ab0e0e95980f183ec/1621912426669/Romie-Regular.woff');
  }
@font-face {
font-family: 'MonumentExtended-Regular';
src: url('}https://static1.squarespace.com/static/60a4079e18844e32d8ad1eb3/t/60ac6babcd97d34548e128a7/1621912491471/MonumentExtended-Regular.woff');
  }

h1 {font-family: 'Romie-Regular';}
h2 {font-family: 'Romie-Regular';}
h3 {font-family: 'Romie-Regular';}
h4 {font-family: 'Romie-Regular';}

p {
  font-family: 'MonumentExtended-Regular';
  font-weight: 100;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 2em;}

h1.entry-title {
    font-family: 'Romie-Regular' !important;
}
h2.newsletter-form-header-title {
    font-family: 'Romie-Regular' !important;
}

.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
button.newsletter-form-button.sqs-system-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.blog-item-title h1.entry-title {
    font-family: 'Romie-Regular' !important;
}

/* blog title font */
h1.blog-title, h1.entry-title, a.summary-title-link {
    font-family: 'Romie-Regular' !important;
}

 

Thanks in advance!

I see some small problems on your site. If you need to fix, just let me know, we will give the code

Site URL – https://rae-mercer.squarespace.com/

1. (Mobile-Homepage) resize image?

2. (Tablet-Footer) Increase text column width?

3. (Gallery) You haven’t changed SEO Title so the browser title still shows “Gallery 3”