Reading list Switch to dark mode

    Prestashop Google Fonts {User-Guide}

    Updated 19 December 2023

    Prestashop Google Fonts is an effective tool that allows you to add Google Fonts to the Prestashop theme without coding. Improve user experience and boost engagement by making your content look more attractive with eye-catching fonts.

    • Over 1000 Google Fonts to choose from.
    • Select Google Fonts for front office and back office.
    • Choose one font for headings and another for paragraphs.
    • Improve the appearance of your site.

    NOTE:

    PrestaShop Google Fonts module is compatible with PrestaShop framework version 8.x.x.

    Check the overview of the plugin in the video mentioned-below –

    0hI3l908m40

    Features of Prestashop Google Fonts

    • 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.

    How to Install Prestashop Google Fonts

    • 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.
    easypost shipping installation
    easypost shipping installation
    easypost shipping installation

    Module Configuration

    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.

    Searching for an experienced
    Prestashop Company ?
    Find out More
    Dashboard-•-Demo
    24-1

    Configuration

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

    2-6

    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.

    How to get Google Webfont Key

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

    google-font1

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

    Google-font2

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

    Google-font3

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

    google-font4

    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.

    5-4
    6-5
    7-7

    Front End View

    8-5

    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.

    14-2

    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.

    10-5
    11-4

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

    12-4

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

    25-1

    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.

    Support

    For any kind of technical assistance or query, please raise a ticket or send us a mail at [email protected]

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

    Current Product Version - 1.0.1

    Supported Framework Version - 1.7.x.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content