Laravel eCommerce Google Web Fonts

The Bagisto Laravel eCommerce Google Web Fonts module lets the admin apply any Google font to the storefront, the admin panel, or both.

With this module, the admin can browse the live Google Fonts catalogue and preview each font in its own typeface.

Activate a font in just a few clicks and give your store a distinctive look without editing any theme code. The module is compatible with Bagisto v2.4.10.

• Separate targets: apply the active font to the admin panel, the storefront, or both.
• Live font catalogue: browse the complete Google Fonts list and search it by family or category.
• Font preview: every font in the list appears in its own typeface before you save it.
• Add several fonts at once: select multiple fonts in one go, while fonts that already exist are skipped.
• One active font: activating a font asks for confirmation and deactivates the previous one automatically.
• Module switch: enable or disable the whole module from the configuration.
• Font management: delete a single font, or select several fonts and delete them together.
• Instant storefront update: the module clears the full page cache whenever a font is activated or deleted.
• Access control: admin roles decide who can manage Appearance → Web Font.

• Unzip the respective extension zip and then merge the “packages” folder into the project root directory.
• Open the root composer.json and add the namespace under autoload.psr-4:

The module needs a Google Fonts Developer API key to list the catalogue. However, shoppers and admins never need the key to see the active font.

1. Open the Google Fonts Developer API documentation.
2. Click on the Get a Key button, then select or create a Google Cloud project.
3. Copy the generated key, which the admin then pastes into the module configuration.

After the successful installation, the admin navigates to Configure >> General >> Design. There, the Web Font section holds the following fields:

• Status: turns the module on or off. The remaining fields appear only once it is switched on.
• API Key: the Google Fonts Developer API key, required while the module is enabled.
• Enable for Admin: set it to Active to apply the active font to the admin panel.
• Enable for Storefront: set it to Active to apply the active font to the storefront.

Step-by-Step: Configure the Web Font Module

1. First, go to Configure >> General >> Design.
2. Next, switch on Status in the Web Font section.
3. Then paste your Google Fonts key into API Key.
4. Choose Active or Inactive for Enable for Admin and Enable for Storefront.
5. Finally, click on the Save Configuration button.

To manage fonts, the admin navigates to Appearance >> Web Font. This page lists every saved font with its ID, font name and status.

Clicking on the Add Web Font button opens the font catalogue. Here, the admin searches for fonts, previews each one in its own typeface and selects as many as needed.

After saving, the new fonts appear in the list as Inactive. Next, clicking on the check icon of a font opens a confirmation dialog.

Once the admin clicks on Agree, that font becomes Active and every other font turns inactive. Because only one font can be active, the store always uses a single typeface.

Step-by-Step: Add and Activate a Web Font

1. Go to Appearance >> Web Font.
2. Click on the Add Web Font button.
3. Type a name in Select Fonts and click on the fonts you want; each one appears as a chip.
4. After that, click on the Save Web Font button.
5. In the list, click on the check icon of the font to use.
6. Lastly, click on Agree to activate it.

Step-by-Step: Delete Web Fonts

1. To delete one font, click on its delete icon in Appearance >> Web Font, then click on Agree.
2. To delete several fonts, tick their checkboxes and choose Delete from the Select Action menu.
3. Then confirm the deletion by clicking on Agree.

After activation, the storefront switches to the active font, as the image below shows. Moreover, cached storefront pages refresh right away, because the module clears the full page cache.

Step-by-Step: Apply the Font to the Storefront

1. Make sure Status is on and Enable for Storefront is set to Active.
2. Activate a font in Appearance >> Web Font.
3. Then open the storefront to see the new font.

Similarly, the admin panel uses the active font when Enable for Admin is set to Active, as shown in the image below.

Step-by-Step: Apply the Font to the Admin Panel

1. Set Enable for Admin to Active in Configure >> General >> Design.
2. Activate a font in Appearance >> Web Font.
3. Next, reload any admin page to see the font applied.