# 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/)

**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 many theme elements and sections.&#x20;

**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 color.&#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 7 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 sections.

**Breadcrumb**

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

<figure><img src="/files/XVZLTU3fIAnU2zDgwE3w" 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;

**Cart Page**

Set cart table header and summery background with light color.

**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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://adornthemes.gitbook.io/vogal-theme/theme-settings/fonts-and-colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.