Fonts Style and Properties

Learn how to add/change Fonts from Google. Also learn how to change font size, color, spacing etc...

When it comes to choosing fonts, you have to think of it’s big picture. Choosing the right font combination is very important for your brand or your site, also from a design perspective it adds more value to the user experience.

As of now, Gridbox supports Google Fonts. You can't upload custom fonts, however if you've an access to code edtior [PRO Plus] plan. You can import fonts from CDN like Adobe fonts and use them in CSS file.

Importing & Using Fonts from Google Fonts

Importing Fonts

1. Click on any text element like Heading or Paragraph

2. Under Typography -> Click on Import Fonts [Next to Font Family]

3. This will open the Import Fonts Dialog

4. Choose any font like Poppins, Open Sans and it's related styles & subsets like latin

5. Then click on Add Font.

6. You can repeat the above steps and import multiple fonts

7. Close the dialog.

Using the imported font style

Applying the imported Font to Selected Text

1. Click on any text element like Heading or Paragraph

2. Under Typography -> Font Family -> Choose the imported font

3. You're done. The newly imported font style will be applied

Changing Font Color

Changing Font Color

1. Click on any text element like Heading or Paragraph

2. Under Typography ->Color -> Choose any color you want

3. You're done. Font color will be applied

Changing Font Size

Changing Font Size

1. Click on any text element like Heading or Paragraph

2. Under Typography ->Font Size-> Choose any size you want in px or em.

3. You're done. Font size will be changed

Changing Letter Spacing, Line Height, Alignment & Decoration

1. Click on any text element like Heading or Paragraph

2. Under Typography -> Letter Spacing or Line Height

3. You're done. Letter Spacing or Line height will be changed.

To change Text Alignment

1. Click on any text element like Heading or Paragraph

2. Under Typography -> Text Align -> Click on any of these options [Left, Center, Right & Justify]

3. You're done. Text alignment will be changed.

To change Text Decoration

If you want to underline or strikethru style for any selected text property

1. Click on any text element like Heading or Paragraph

2. Under Typography -> Text Decoration -> Click on Underline (U) or (S) or x to clear the style.

Adding Text Shadow

Sometimes you want to decorate text element by adding effects like shadow. You can even add multiple text shadows on a single text element to create unique visual effects by styling each text shadow differently.

Text Shadow

1. Click on any text element like Heading or Paragraph

2. Under Typography -> Text Shadow + -> Click on the plus button

3. Click on edit layer

4. Add X value -> The position of the horizontal shadow. Negative values are allowed

5. Add Y value -> The position of the vertical shadow. Negative values are allowed

6. Blur -> To add blur or glow effect

7. Color -> Text shadow color