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.

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.

Updated on: 16/09/2025