# Fonts & Colors

### <mark style="color:blue;">Fonts</mark>

You can choose to display fonts from **Shopify** or **Google.** Select font to display from **Font source.**

**Shopify Fonts**&#x20;

First select Shopify from Font source.

From the Shopify font library, you can choose up to three font families. It is advised to choose one or two font families. This will assist with site loading. Altering the font you choose can slow down your store.. [Read more](https://help.shopify.com/en/manual/online-store/store-speed/improving-speed#fonts).&#x20;

**Google Fonts**

First select Google from Font source.

From the Google Font Library, you can choose up to three font families. It is advised to choose one or two font families. This will assist with site loading. Altering the font you choose can slow down your store. F[ind google font name list here](https://fonts.google.com/)

**Color Schemes**

A color scheme refers to a set of colors that can be utilized for various sections. There exist predefined color schemes with specific themes that has been chosen for different sections and settings. Additionally, you have the option to create additional color schemes through the Theme settings and apply them according to your store's design. By default, color scheme 1 is assigned to sections or other theme elements that possess a white background and dark fonts.&#x20;

Please refer to the attached document for a visual representation of how colors can impact the style of different sections.

<div align="left"><figure><img src="https://1998584625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd0cqGtTLBe8C2BHflGsV%2Fuploads%2FXClvVGcCvQvClRlLWz8f%2Fcls3.jpg?alt=media&#x26;token=71e9b943-ad64-4d8b-8d56-8587da386d4a" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://1998584625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd0cqGtTLBe8C2BHflGsV%2Fuploads%2F6n4RtgUFwMIMQoDThCdD%2Fcls1.jpg?alt=media&#x26;token=b2bf4ce5-96d2-4764-a33a-ac33cca36aaa" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1998584625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd0cqGtTLBe8C2BHflGsV%2Fuploads%2FTY5xiicRJ1SqBaoKmAm5%2Fcls.jpg?alt=media&#x26;token=d02e936e-3ee4-41aa-859c-1fcd1f0291c9" alt=""><figcaption></figcaption></figure>

**Body Text**

Select font family, set font size, line height ( space between 2 text lines), letter spacing ( space between letters) and color.  Body text is used by default for various theme elements and sections.

**Headings**

Heading settings will be applied on all headings used on your store.&#x20;

Select font family for headings and set font size, font weight, line height ( space between 2 text lines), letter spacing ( space between letters) and colors.&#x20;

**Form Fields**

Set text color, background and border color for textbox or textarea on your store.

**Buttons**

You can style all the buttons that has been used throughout your store ( Exclude checkout page)

Select font family and set font size, font weight, font case and set border radius (Border radius makes button rounded corners)

There are total 3 buttons style available to use throughout layout.&#x20;

You can set text, border, background and hover color for each button then you can select these button design from individual settings.

**Breadcrumb**

Set font size, text and background color for breadcrumbs that appear on top of every page.

<figure><img src="https://1998584625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd0cqGtTLBe8C2BHflGsV%2Fuploads%2Fejcd8DjAKzOC6L89BTJp%2Fbreadcrum.jpg?alt=media&#x26;token=3d46d5a0-dc34-4e1d-ace2-f39431eec0a4" alt=""><figcaption></figcaption></figure>

**Pages**

Page title style that display on top of the page.  Select page title font from **Title Font** dropdown and set font size, font weight and text align.&#x20;

**Popup**

Set border radius to to create rounded corners for all pop ups appearing on your store.

**Carousel**

Set arrows and dotted navigation colors that display on carousel and slider.

**Other Colors**

Set colors for several basic theme elements , such as borders, tooltip text & background, theme color, and links you create with text.
