Prestashop Google Fonts {User-Guide}

• Integrate Google Fonts with your Prestashop store.
• Select Google Fonts for different elements of the front office like headings, paragraphs, anchor tags, footer, and button tags.
• Choose Google Fonts for different tags in the back office like menu, page title, label tags, and button tags.
• You can also apply specific Google Font to the whole shop or back office.
• Allows you to preview what your content will look like with Google Fonts.
• Prestashop Google Fonts module is MultiShop Compatible.

• Firstly, go to the module manager in the back office and click on ‘upload a module’.
• After that, drag and drop the module file or select the file from the system.
• In this way, the module installation will be successful.

Post-installation, a new tab “Google Font Settings” gets available under the Design section in the back office. From here, admin can configure the module settings.

Configuration

Under Configuration, admin needs to specify Google Webfont Key to integrate Google Fonts to the Prestashop store.

After saving the configuration, a list of all the Google fonts will display in the dropdown lists under front office and back office settings. In case admin has not generated the key, then Google Fonts will not be visible in dropdown lists and he can apply a custom Google font to a specific element or tag.

To obtain the Google Webfont Key, go to https://developers.google.com/fonts/docs/developer_api

Now, click on Identifying your application to Google as shown in the above screenshot.

Click on “Get a Key” button to create a project.

In a popup, enter tthe project name and click on Next.

On clicking the next button, the store owner will find the Google Webfont Key.

Front Office Settings

Under Front Office Settings, admin can select Google fonts for different elements of front office. Admin can choose to apply a single font on the whole Prestashop site or select separate fonts for different elements like headings, paragraphs, anchor tags, etc.

A list of all the Google fonts is displayed in the dropdown lists under Front office settings. Admin can select the suitable fonts for headings, paragraphs, anchor tags, button tags, and footer.

Also, admin can select a custom Google font for the whole shop or different elements in case you have not created Google Webfont key.

Front End View

At the front end, the customers can view Google fonts selected by admin for different HTML elements such as headings, paragraphs, anchor tags, button tags, and footer.

If admin applies a specific font on the whole shop, then the entire content at the front end will display as per the selected font.

Back Office Settings

Under Back Office Settings, admin can select Google Fonts for different tags in the back office. Admin can choose to apply a single font on the whole back office or select separate fonts for different tags like page title, label tags, menu, and button tags.

Admin can select custom Google font for the whole shop or different tags.

In the above screenshot we can see admin has applied Aclonica font to the whole back office.

After applying Google fonts to different tags, let’s have a look at back-end view.

This was all about Prestashop Google Fonts Module. I hope this document will help you in checking the functionality of the module in a better way. Also, do let us know about your views in the comments.

For any kind of technical assistance or query, please raise a ticket or send us a mail at support@webkul.com

Also, please explore our Prestashop development services and vast range of quality Prestashop addons.