How to Add Custom Font in Magento 2 PWA

In this tutorial, Today I will explain to how to add custom font in Magento 2 PWA. Magento 2 PWA venia theme provide some default fonts. But, You want to change that font style and set your custom font then, you need to customize some points to load custom fonts.

You may also like this :

Let’s follow some below steps for that.

Magento root directory = {baseUrl} = /var/www/html/m242

1) First, you need to open this file {baseUrl}/pwa-studio/packages/venia-concept/template.html file and paste the below code inside <style type=”text/css”> .. </style> tag

Copy Code


@font-face {
    font-family: 'RobotoItalic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('RobotoItalic'), url("/venia-static/fonts/Roboto/RobotoItalic.ttf") format("truetype");
}

2) Then, you need to open this file {baseUrl}/pwa-studio/packages/venia-ui/upward.yml and update this below line to add new font file types

Copy Code


pattern: '(js|json|png|jpg|gif|svg|ico|css|txt|ttf)'

Here, I added ttf file type to allow custom font file.

3) In Last, Add your custom font files folder at {baseUrl}/pwa-studio/packages/venia-ui/venia-static/fonts

Now, execute this below command from pwa-studio directory

Copy Code


yarn build
yarn run watch:venia

Custom font is loading in your instance successfully.

That’s it !!!

I hope this blog is easy to understand how to add custom font in Magento 2 PWA. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with a proper solution.

Stay Safe and Stay Connected !!

Post Views: 4,516