Add Decorative Text

What does this code do?

This code snippet will allow you to add slanted decorative text to your Squarespace site.

Note: If you want this text to overlap an image, it may be easiest to just add the text to the image itself. Normally I do not suggest having any text inside of an image because the search engines cannot read images and so the text cannot contribute to your SEO. However, simple text like “hey there” is not important for your SEO and will be readable on all screen sizes.

Code Snippets

Copy and paste this code into a Code Block.

<h3 class = "decorative-text">Hey there!</h3>

You can set your text to be a h1, h2, h3, h4, p, or a. This text is set to be a h3.

Then copy and paste this code into Design > Custom CSS.

/* Decorative Text */
.decorative-text {
  font-family: 'Corinthia', cursive; /* font family name */
  font-size: 4rem; /* font size */
  -webkit-transform: translate(-10vw, -7vw) rotate(-20deg); /* font placement for other browsers*/
    transform: translate(-10vw, -7vw) rotate(-20deg); /* font placement */
}

Corinthia is a font that was loaded from Google Fonts. If you would like to use a Google Font or custom font, use this code snippet.

Customize the font family and font size. The translate moves the font up and to the left. The rotate turns the font. Ensure that the -webkit-transform is the same as transform as these help the style apply in safari as well as chrome.

If you need the text to overlap other elements then add in the following code before the final “}”

position: relative;
z-index: 5 !important;

How To Use It

1. Copy and paste the code as indicated above.

2. Edit the text and font styles.