---
title: "Font and color properties"
date: "2017-11-10T16:30:19+00:00"
summary: "Customize your website's typography with ease. Learn how to set font family, weight, and color in Site Studio. Enhance readability and visual appeal with expert guidance on CSS properties."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/font-and-color-properties"
id: "3e419843-55ef-410e-b14e-18c345fdcc74"
---

Table of contents will be added

Set the Font family, Font weight and Font color.

Font family
-----------

Set the font family to be applied to text.

### Options and behavior:

*   Font families are set-up within Website settings > [Font libraries](/drupal-starter-kits/add-ons/site-studio/set-font-libraries-and-font-stacks "Set-up font libraries and font stacks")
*   Font families shown in the list will include all fonts set-up within your font stack
*   If no font family is selected, the font family will be inherited from a base style or your [Default font settings](/drupal-starter-kits/add-ons/site-studio/defining-your-default-font-settings "Defining your default font settings")

You only need to select a font family if you want to select a specific font to be applied to the element.  
Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a)

Font weight
-----------

Set if the weight of the font applied to the element. The font weights available depend on the font family you are using.

### Expected value:

*   Numeric values - Set the font weight using a numeric value available for the font family
*   Keyword values - Set the weight using a keyword. This is usually Normal or Bold
    *   Normal is the same as 400
    *   Bold is the same as 700
    *   Strong can also be used and is equivalent to bold

If you want to use different numeric font weights for normal and bold you can specify them as child elements Normal and Strong.  
Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)

Font color
----------

Set the color of the font. If you want to manage your font color globally, select a color from your color palette. This is defined in Color palette in Website settings.

### Expected value:

*   Select a color from the color palette
*   Gradient colors are not accepted

Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)

Important

When you enter a number into a property field it will be interpreted as a pixel value. If you have kept the default recommended setting of 'Convert PX to REM' in [Base unit settings](https://sitestudiodocs.acquia.com/6.0/node/27 "Configuring your base unit settings") then pixel values will be converted to REM's. To use a different unit from pixels, type the unit after the number E.g. 1.5em, 50%, 50vh, 50vw. [Click here for a list of units and their browser support.](https://www.w3schools.com/cssref/css_units.asp)