Start with 3 months of Mawg3 for Free

عربي

Change your website fonts and colors

Your site's fonts and colors are set in one place: Site Styles in the editor. Pick a palette and a font pack, and every page updates at once. You can also set exact brand colors and choose separate fonts for headings, paragraphs and buttons. Here's how to change fonts and colors.

Updated 5 October 2026

Open Site Styles

  1. Open the editor from your admin panel.
  2. Click the paintbrush icon at the top right. Site Styles opens on the right.
  3. You'll see Themes, Fonts, Colors, Buttons, Forms, Animations, Miscellaneous and Extras. Click any one to open it.

Pick a color palette

  1. Open Colors to see Recommended Color Palettes, or open Themes to see the same palettes grouped as Professional, Playful and Sophisticated.
  2. Click a palette. Your whole site changes right away.
  3. Not quite right? Try another. Nothing is lost when you switch.

Choose fonts for Arabic and English

Open Fonts. If your store uses Arabic, the Arabic + English (Bilingual) packs show first. These include Cairo, Tajawal, IBM Plex Sans Arabic and other fonts made for Arabic text.

Recommended Font Packs pair a heading font with a paragraph font for English. Below them, you can browse every font by Arabic, Sans Serif, Serif, Display and Handwriting.

If you choose a font without Arabic letters, a note warns you. Arabic text then falls back to Noto Sans Arabic.

Set your own fonts and colors

  1. Open Miscellaneous.
  2. Under Custom Colors, set Background, Surface, Text, Heading, Accent, Muted, Button Background and Button Text.
  3. Under Custom Fonts, pick a Heading Font, Paragraph Font and Button Text Font. Pack Default keeps the font from your pack.
  4. Under Text Sizes, change the default size of each heading and paragraph style.
  5. Use the reset links under each group to go back to the pack's settings.

Change one piece of text

Need one headline in a different font or color? Select that text on the page and use the font picker and color picker in its toolbar. This only changes that text box.

Tips

Use two or three main colors and keep them the same everywhere. Customers trust stores that look consistent.

Check contrast. Light grey text on white is hard to read on a phone in bright sunlight.

Use the website editorGet to know the Mawg3 website editor: the top bar, the Insert and Pages panels, saving, undo, keyboard shortcuts and asking Barq AI to edit your text.Add text and images, plus buttonsAdd text and images to any section of your Mawg3 site, style headings, upload or replace photos, and add buttons that link to pages or other websites.Choose a website templateChoose a website template on Mawg3: browse and preview free designs on desktop and mobile, start a new site from one, or install a new design later.