# Font Picker
The Font Picker has three tabs: **Choose Font,** **Google Fonts**, and **Theme Fonts**. When you are editing a theme font, only the Choose Font and Google Fonts tabs are visible. When selecting a font on a widget, only the Choose Font and Theme Fonts tabs are visible.
The **Choose Font** tab lets you build a font definition, the **Google Fonts** tab lets you choose and optionally embed a google font, and the **Theme Fonts** tab lets you select one of the fonts defined in the theme.
.png?alt=media)
| Element | Description |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Font Family | Defines the list of font names to use in the theme. The browser will use the first supported font family. |
| Dimensions | Defines the size of the font in pixels. The Line Height is usually not needed and should be omitted. |
| Style | Use the Bold and Italic check boxes to specify the font-weight and the font-style. When the check boxes are in the indeterminate state, the font-weight or font-style are not added to the definition. Otherwise the font definition will have a font-weight and a font-style.
The decoration drop down lets you define the text-decoration style.
|
| Sources | The sources list lets you add custom font definition files (URLs) and define a new font family. See Fonts for more information.
Click .png?alt=media)
to add new font and specify where the font files are located.
.png?alt=media)
The dialog shown above lets you define a font family name and associate it with one or more font sources. Once defined, the new font family name can go into the Font Family field. Use the .png?alt=media)
button to import a local file as an embedded base64 data font.
|
| Text Shadow | Here you can type a CSS font shadow definition. See [CSS text-shadow property](http://www.w3schools.com/cssref/css3_pr_text-shadow.asp). i.e. "2px 2px #ff0000". |
The **Google Fonts** tab allows you pick one of the fonts offered by [Google Fonts](https://fonts.google.com) and either link the source of embed the font in the theme. We usually recommend embedding the font: it loads faster and your users will not require an open internet connection to download the font from Google.
{% hint style="info" %}
Make sure to use both, the woff and the ttf version of web fonts to make auto sizing work properly. See [Tips & Tricks](https://docs.wisej.com/theme-builder/concepts/tips-and-tricks) for more details.
{% endhint %}
.png?alt=media)
| Element | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Font Family | Selects the Google Font. |
| Embed as Data URI | When checked (default), the font is downloaded and embedded in the theme file as a base64 data URI. |
| Dimensions | Defines the size of the font in pixels. The Line Height is usually not needed and should be omitted. |
| Style | Use the Bold and Italic check boxes to specify the font-weight and the font-style. When the check boxes are in the indeterminate state, the font-weight or font-style are not added to the definition. Otherwise the font definition will have a font-weight and a font-style.
The decoration drop down lets you define the text-decoration style.
|
| Text Shadow | Here you can type a CSS font shadow definition. See [CSS text-shadow property](http://www.w3schools.com/cssref/css3_pr_text-shadow.asp). i.e. "2px 2px #ff0000". |
The **Theme Fonts** tab is visible when selecting a font for the *font* property of a specific appearance.
.png?alt=media)
---
# 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://docs.wisej.com/theme-builder/user-interface/font-picker.md?ask=
```
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.