# Text
Foxify makes it easy for you to structure your page content with clear headings, descriptions, promotional messages, and calls to action.
## How to add Text
1. In the FoxStudio editor, on the left sidebar, click **Add elements**, or press **`E`**.
2. Choose **Text.**
3. Drag the text onto your canvas.
4. Click **Edit text** and type your text.
### Types of Text
Different types of text can be added:
| Option | What it does | When to use it |
| -------------------- | ----------------------------------------------------- | :------------------------------------------------------------- |
| **Headings** | Add headings from H1 to H6 to structure your content. | Use for section titles and content hierarchy. |
| **Paragraphs** | Add supporting or descriptive text. | Use for product information, descriptions, and longer content. |
| **Display text** | Add larger, more prominent text. | Use for hero sections, banners, promotions, or key messages. |
| **Text with shadow** | Add text with a shadow effect. | Use when you need extra visual emphasis or contrast. |
## How to edit Text
Organizing your text through proper formatting enhances communication and visual clarity. Additionally, you can apply different formatting for each breakpoint, ensuring an optimal display on every screen.
1. **Select** the relevant text element in the editor.
2. Use the tools bar above the selected text element to quickly optimize it.
All the following formatting tools can be found in the **Inspector** panel.
## **Formatting options**
### HTML tag
Choose the HTML tag that defines the semantic role of your text.
| Option | When to use it |
| --------- | ----------------------------------------------------------------------- |
| **H1–H6** | Use for headings according to the content hierarchy. |
| **P** | Use for paragraphs and supporting text. |
| **Span** | Use for inline text that doesn't need a heading or paragraph structure. |
### Text style
Select your **pre-defined typography** in the **Global styles** to apply to an existing text element.
See more: [Global styles](https://docs.foxecom.com/foxify-app/foxstudio/page-customization/global-styles)
### Text font, spacing, color, and styles
| Option | What it does |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Font** | Choose from hundreds of integrated fonts/
[Upload your custom fonts to Foxify.](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/how-to-add-custom-font) |
| **Color** | Change the text color. |
| **Weight and Size** | Change how bold (thick) or how large your text appears. |
| **Align** | Align your text to the **left, center,** or **right**, or justify it across the text box. |
| **Text case** | Set text capitalization:
**As typed/ UPPERCASE/ Title Case/ lowercase** |
| **Spacing** | Adjust the line and character spacing in the text box:
**Line height/ Letter spacing** |
| **Text style** | **Normal/ *Italic*** |
| **Decoration** | **None/ Underline/ ~~Strikethrough~~** |
| Option | What it does |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Font** | Choose from hundreds of integrated fonts/
[Upload your custom fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/how-to-add-custom-font). |
| **Color** | Change the text color. |
| **Weight and Size** | Change how bold (thick) or how large your text appears. |
| **Align** | Align your text to the **left, center,** or **right**, or justify it across the text box. |
| **Text case** | Set text capitalization:
**As typed/ UPPERCASE/ Title Case/ lowercase** |
| **Spacing** | Adjust the line and character spacing in the text box:
**Line height/ Letter spacing** |
| **Text style** | **Normal/ *Italic*** |
| **Decoration** | **None/ Underline/ ~~Strikethrough~~** |
| Option | What it does |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Font** | Choose from hundreds of integrated fonts/
[Upload your custom fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/how-to-add-custom-font). |
| **Color** | Change the text color. |
| **Weight and Size** | Adjust the font weight and size of the button label. |
| **Align** | Align your text to the **left, center,** or **right**, or justify it across the text box. |
| **Text case** | Set text capitalization:
**As typed/ UPPERCASE/ Title Case/ lowercase** |
| **Spacing** | Adjust the line and character spacing in the text box:
**Line height/ Letter spacing** |
| **Text style** | **Normal/ *Italic*** |
| **Decoration** | **None/ Underline/ ~~Strikethrough~~** |
### Effects
You can apply a shadow effect to your text using one of the available presets, or leave it at "None" if no shadow is desired.
| Option | What it does |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **Text shadow** | Add a predefined shadow to make text stand out from the background. |
| **Opacity** | Adjust how transparent the text appears.
Use lower opacity carefully to maintain readability, especially for smaller text. |
**Hyperlinks**: Add links to your text by selecting the text and clicking the link icon from the editing toolbar.
## Tips and best practices
* **Keep headings concise:** Help customers scan your page and identify key sections quickly.
* **Create a clear hierarchy:** Use heading levels consistently to organize your content.
* **Prioritize readability:** Choose legible font sizes, sufficient line spacing, and strong text contrast.
* **Check every breakpoint:** Review how text wraps and aligns on desktop, tablet, and mobile to avoid awkward line breaks or overflowing content.
## FAQs
#### Can I use different text formatting for different screen sizes?
Yes. You can adjust text formatting for each breakpoint to optimize how it appears across devices.
#### Can I add a link to part of my text?
Yes. Select the text you want to link, then click the **link** icon in the editing toolbar.
#### Can I use my own font?
Yes. You can upload a custom font to Foxify and apply it to your text.
## Related articles
Apply global styles across your store
How do I add a custom font?
Optimize for mobile with AI responsive