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

Viewport settings erasing font when small

Question

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

I am trying to have my H1 text appear smaller when on mobile so I set up the following code:

 

  h1 {
  font-family:"Strawberry Whipped Cream" !important;
  font-size: 10vw;
  text-shadow:4px 4px 10px #000;
  }
 

When the text shrinks on mobile it erases the font family. Am I going about this the wrong way?

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 1

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

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

I don't see that font at all, on any size. Do you have it installed into your page?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

That font still isn't installed properly to your page.

Where did you get the font from?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

I am not sure how it worked before, the font face was incorrect in the h1 tag and the url was missing ( ).

Is it working properly now? It seems to be good on my end.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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