---
title: "Font properties"
date: "2017-11-10T16:28:50+00:00"
summary: "Customize your website's typography with Site Studio's font properties. Learn how to apply styles, adjust sizes, set alignments, and add text effects for a polished, professional look."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/font-properties"
id: "e2bc1a30-efd3-4033-88e6-1c7aabad8e65"
---

Table of contents will be added

Font properties allow you to apply styles to text on your website including selecting fonts added to your [Font libraries](/drupal-starter-kits/add-ons/site-studio/set-font-libraries-and-font-stacks "Set-up font libraries and font stacks").

Adding font properties to a style
---------------------------------

To add font properties to a style:

1.  Navigate to the Style builder. This is available when you edit [Base styles](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles"). For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder")
2.  Within the Style editor area, click on the **Properties** button
3.  Then select Font > **(Select a Font sub-group)** in the menu

The Font properties include the following sub-groups of fields:

Font and color
--------------

*   **Font family -** Set the font family
*   **Font weight -** Set the font weight
*   **Font color -** Set the font color from the color palette

For details of each property, see [Font and color properties.](/drupal-starter-kits/add-ons/site-studio/font-and-color-properties "Font and color properties")

Font size and alignment
-----------------------

*   **Font size -** Set the size of the font
*   **Line height -** Set the distance between lines of text
*   **Text align -** Set the text to align left, center or right
*   **Letter spacing -** Set the distance between each letter
*   **Word spacing -** Set the distance between each word
*   **Text indent -** Set an indent to the left of the text (or right if text direction is right to left)

For details of each property, see [Font size and alignment properties.](/drupal-starter-kits/add-ons/site-studio/font-sizing-and-alignment-properties "Font sizing and alignment properties")

Font style and wrapping
-----------------------

*   **Font style -** Set the font to Normal or Italic
*   **Text transform -** Set the font to Capitalise, Uppercase or Lowercase
*   **Text decoration -** Set the font to Underline, Overline or Line-through
*   **Word wrap -** Set words to drop to the next line or break over two lines
*   **Text direction -** Set the text direction from Left to right or Right to left for RTL languages

For details of each property, see [Font style and wrapping properties](/drupal-starter-kits/add-ons/site-studio/font-style-and-wrapping-properties "Font style and wrapping properties").

Text shadow
-----------

*   **Horizontal -** Set the horizontal position of a drop shadow
*   **Vertical -** Set the vertical position of a drop shadow
*   **Blur radius -** Set the size of blur
*   **Color -** Set the color of the shadow

For details of each property, see [Text shadow properties.](/drupal-starter-kits/add-ons/site-studio/text-shadow-properties "Text shadow properties")