Jump to content

Custom css font outreaching text box - cutting off on mobile view

Go to solution Solved by OneFourProductions,

Recommended Posts

Hiya,

 

Super duper novice with the css side of things, but I've imported my desired font into Square space 'successfully' but the text seems to have come in funny and is extending outside of the text box. This results in text appearing cut off on mobile when visiting the website, and also if applying any text animation features (e.g. a box behind the text or underline) these do not line up either. I used the following script for font integration:

@font-face {
    font-family: Nomad;
    src: url(https://static1.squarespace.com/static/634f771fcedbc678fd870fbb/t/644ecc4de7e60939421d0c54/1682885710217/Nomad+3.ttf);
}
h1,
{
    font-family: 'Nomad';
}

Any help would be much appreciated - cheers!

Screen Shot 2023-05-01 at 9.44.10 AM.png

Link to comment

Strange! I seem to be getting these results on my iPhone currently. When I first posted above with the screenshot in pc/web mode, you'll see the text was outside the text box, so the top of the text was being cutoff. However I have since just knocked all the text down a line with shift + enter so that it all falls inside the text box. However this has resulted in random parts of the text missing on phone now, for my phone anyway as you'll see in the attached. It's also not the best fix as it makes the surround text box larger and therefore more limiting with it's placement vertically.

Thanks tuanphan!

IMG_0903.PNG

IMG_0904.PNG

Link to comment

Another issue I've encountered now is that highlight animation are not working for the font, and n either does the standard character strikethrough. Here is an example of the highlight animation applied but not working below. I'm not sure if this is an issue realting to the font file itself or the coding integration of the font, which I had just copy and pasted from another article... CSS line can be found in my very first post above. 

URL: https://www.onefourproductions.co.nz/branded 

Any help would be massively appreciated!

 

Screen Shot 2023-05-09 at 11.00.03 AM.png

Screen Shot 2023-05-09 at 11.04.07 AM.png

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.