Jump to content

Viewport settings erasing font when small

Recommended Posts

  • Replies 7
  • Views 320
  • Created
  • Last Reply

I see the issue. The code is incorrect for the font url, as well as the name of the font-family:

@font-face {
  font-family: StrawberryWhippedCream;
  src: url(https://static1.squarespace.com/static/5eea86de6619d84ab8136723/t/5f0b3e5db4e91d7c8f416bd2/1594572381875/Strawberry+Whipped+Cream_2.ttf);
  font-weight: normal;
  font-style: normal;
}

h1 {
font-family: StrawberryWhippedCream;
font-size: 10vw;
text-shadow: 4px 4px 10px #000;
}

 

Link to comment

Thanks for the help, I'm still misunderstanding this I guess. I downloaded the font onto my computer using dafont.com. Imported the file into custom CSS and copied the source URL provided. I was following a guide for installing custom font and was getting an error after trying:

@font-face{
   font-family: 'Butler' ;
     src: url('https://static1.squarespace.com/static/57e2c4ed893fc0209923cd9e/t/57e31c2be3df280f317a0708/1474501675437/Butler_Medium_Stencil.otf') ;
   font-weight: bold;
  font-style: italic;
}

and replacing the fields with my own.

What further confuses me is that the font worked perfectly fine even before I did that; it just wasn't scaling on mobile hence how I got here.

Link to comment

Archived

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.