> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weltpixel.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add and use a custom font in Pearl Theme Magento 2 ?

**Note:**
- The Pearl Theme uses **Google Fonts** by default.
- To add a **custom (local) font**, make CSS changes in your **Pearl Child Theme** and override the desired headings with your new font. Use one of the solutions below.

---

## Solution 1 — Include the font per Magento docs (recommended)
Follow the official Magento guide for using custom fonts in a theme:  
https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/using-fonts.html

*(Tip: Place your font files in your child theme under `web/fonts/`, and reference them from your theme’s custom LESS—e.g., `web/css/source/_extend.less`.)*

---

## Solution 2 — Define `@font-face` in the Pearl Child Theme
Add `@font-face` declarations in your Pearl **Child Theme** CSS/LESS. Example:

    @font-face {
      font-family: 'Playfair Display';
      src: url('../fonts/sitefont/Playfair Display.eot');
      src: url('../fonts/sitefont/Playfair Display.eot?#iefix') format('embedded-opentype'),
           url('../fonts/sitefont/Playfair Display.woff2') format('woff2'),
           url('../fonts/sitefont/Playfair Display.woff') format('woff'),
           url('../fonts/sitefont/Playfair Display.svg#Playfair Display') format('svg');
      font-weight: 400;
      font-style: normal;
      font-stretch: normal;
      unicode-range: U+0020-2212;
    }

    @font-face {
      font-family: 'Century Gothic';
      src: url('../fonts/sitefont/Century Gothic.eot');
      src: url('../fonts/sitefont/Century Gothic.eot?#iefix') format('embedded-opentype'),
           url('../fonts/sitefont/Century Gothic.woff2') format('woff2'),
           url('../fonts/sitefont/Century Gothic.woff') format('woff'),
           url('../fonts/sitefont/Century Gothic.svg#Century Gothic') format('svg');
      font-weight: 400;
      font-style: normal;
      font-stretch: normal;
      unicode-range: U+0020-F003;
    }

---

## Disable Google Fonts if using only local fonts
If you are not using Google Fonts anymore and you’re switching to your **custom/local fonts**, disable Google Fonts to avoid unnecessary external calls.

Go to **Admin → Frontend Options** and, for each section (**H1, H2, H3, H4, H5, H6, Default, Default Buttons, Form Inputs**), set **Google Font Family** to **Use Predefined**.

![Screenshot_at_Feb_13_15-57-04.png](https://storage.crisp.chat/users/helpdesk/website/-/e/1/2/f/e12f2bbf7e676000/7091c883-ddd1-44be-9dde-e1cead_psuky0.png)

> Make sure to change this for **all** sections under **Frontend Options** where Google Fonts are defined.

---

## Applying the custom font to specific elements
Use your new font-family in any selector you need. For example, to apply to the main heading:

    h1 { font-family: 'Playfair Display'; }

---

## After changes
- **Deploy static content** as needed.
- **Clear Magento caches** and **browser cache** to see the updates on the storefront.