Jump to content

Custom Fonts not showing on mobile and styling section titles

Go to solution Solved by tuanphan,

Recommended Posts

Hello, I'm having some issues with a few things regarding the custom css of my website. It's just some simple changes to alter some headlines to a different font.. 

The code I'm using right now is at the end of this post. I'm aware that this is not optimized but it does what I want it to, at least on desktop. The font change is not working on mobile. Right now this is using a google-font import but I've also tried the @font-face approach, to no avail. 

One more thing I'm having trouble with is to  style the content of the feedback section (it's the slider titled "feedback"). Here I'd like to change the font of the title "Feedback" and the names in the slider itself... For everything else I was able to target the block-ids, for this section I can only find the section id.

Link to the website: https://amitolafotografie.de
pass to view: 12345

Happy for pointers and help!

@import url('https://fonts.googleapis.com/css?family=Allison&display=swap');




#block-yui_3_17_2_1_1695496143720_5980
h1{
  font-family: 'Allison', cursive !important;
  font-weight: 400 !important;
  font-style: regular !important; 
}

#block-9e56320dca7141fb8703
h1{
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
 font-style: regular !important; 
}

#block-66fe586e8a5d9075dff6
h2 {
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
 font-style: regular !important; 
}


#block-yui_3_17_2_1_1696097112407_40425
h3 {
  font-family: 'Allison', cursive !important;
  font-size: 3rem !important;
  font-weight: 400 !important;
  font-style: regular !important; 
}

#block-3f0b36d6d10d4feeb5d3
h2 {
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
  font-style: regular !important; 
}

#block-yui_3_17_2_1_1696097112407_55791
h2 {
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
  font-style: regular !important; 
}

#block-yui_3_17_2_1_1697226798585_9993
h2 {
  font-family: 'Allison', cursive !important;
font-size: 5.5rem !important;
 font-weight: 400 !important;
  font-style: regular !important; 
}


#block-155404bff185c7d11cc1
h4 {
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
  font-style: regular !important; 
}

#block-29543333d039679432e1
h4 {
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
  font-style: regular !important; 

}

#block-af94e56a3bbe2abd93bb
h4 {
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
  font-style: regular !important; 

}

#block-1c62bd4930e85fa6c2d9
h4 {
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
  font-style: regular !important; 

}


#block-f1335a1418da8cf5cea9
h2 {
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
  font-style: regular !important; 

}

#block-yui_3_17_2_1_1697226798585_9993
h2 {
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
  font-style: regular !important; 

}

#block-fe7b57dca9d8c40021f8
h2 {
  font-family: 'Allison', cursive !important;
 font-weight: 400 !important;
  font-style: regular !important; 

}

#block-a522b41a5d880719d61d
h2 {
font-family: 'Lora' ;}

#block-yui_3_17_2_1_1699789564910_3140
p {
font-family: 'Lora' ;
}

 

Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution

Add this code to top of CSS box

/* vietnamese */
@font-face {
  font-family: 'Allison';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/allison/v11/X7nl4b88AP2nkbvZCC6a4fTg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Allison';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/allison/v11/X7nl4b88AP2nkbvZCC-a4fTg.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Allison';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/allison/v11/X7nl4b88AP2nkbvZCCGa4Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


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