User Guide for Laravel Multi Company SaaS Web Fonts

Laravel Multi Company SaaS Web Fonts extension enables tenants to personalize the typography of their SaaS websites using Google’s extensive font library.

Tenants can configure separate Google Web Fonts for the Storefront and Admin Panel. This helps create a unique brand identity while improving the website’s appearance and readability.

Note: This module is an add-on to the Laravel eCommerce Multi Company SaaS extension. You must install the extension before installing and using this module.

• Allows each tenant to configure Google Web Fonts for their SaaS website.
• Enables independent font configuration for the Storefront and the Admin Panel.
• Allows tenants to apply fonts exclusively to the Storefront or the Admin Panel as needed.
• Lets tenants enable or disable Google Web Fonts through the configuration panel.
• Provides a searchable drop-down for quickly finding and selecting Google Fonts.
• Supports a wide collection of Google Web Fonts for flexible typography customization.
• Automatically applies the selected fonts based on the tenant’s configuration.
• Offers a simple, no-code interface for managing website typography.
• Keeps font settings isolated, ensuring one tenant’s configuration does not affect another’s website.
• Enhances the overall appearance, readability, and branding of each tenant’s SaaS website.

Installation of Laravel Multi Company SaaS Web Fonts

• Unzip the respective extension zip and then merge “packages” folder into project root directory.

• Goto composer.json file and add following line under ‘psr-4’

"Webkul\\Webfont\\": "packages/Webkul/Webfont/src",
"Webkul\\WebfontSaaS\\": "packages/Webkul/WebfontSaaS/src"

• Goto bootstrap/providers.php file and add following line under ‘providers’

Webkul\Webfont\Providers\WebfontServiceProvider::class,
Webkul\WebfontSaaS\Providers\WebfontSaaSServiceProvider::class,

• Open config/concord.php and add the following line in the modules array:

Webkul\Webfont\Providers\ModuleServiceProvider::class,

• Run these commands below to complete the setup

composer dump-autoload
php artisan webfont-saas:install

That’s it, now just execute the project on your specified domain.

Once the Laravel eCommerce Multi Company SaaS Web Fonts module is installed successfully, each tenant can independently configure Google Web Fonts for their own website.

To access the configuration, log in to the Tenant Panel and navigate to:

Configure → Design → Web Font

This configuration page includes the following options:

• Status – Enable or disable the Google Web Fonts module for your tenant website.
• API Key – Enter your Google Fonts Developer API Key to access the Google Fonts library. This key is required before you can search and apply Google Web Fonts.
• Enable for Admin – Enable this option to apply Google Web Fonts to the Admin Panel. Disable it if you want to continue using the default admin typography.
• Enable for Storefront – Enable this option to apply Google Web Fonts to the Storefront. Disable it to retain the default storefront fonts.

After configuring these settings, click Save Configuration. Once the configuration is saved, you can select and apply Google Web Fonts based on the enabled sections of your tenant website.

After enabling Google Web Fonts for the Admin Panel or Storefront, navigate to:

CMS → Web Font

This section allows you to manage the Google Web Fonts available for your tenant website.

From here, you can:

• View the list of configured Google Web Fonts.
• Add new Google Web Fonts from the Google Fonts library.
• Edit existing font configurations.
• Delete fonts that are no longer required.
• Manage the fonts that will be available for use on your Admin Panel and Storefront.

The CMS → Web Font section lets you manage your website’s typography from one place. It helps you customize your tenant website while maintaining a consistent brand identity.

To add a new Google Web Font, click the Add Web Font button from the CMS → Web Font page.

The tenant can search from all available Google Web Fonts retrieved through the configured Google Fonts API. This makes it easy to find the desired font without scrolling through the entire list.

The Add Web Font page allows tenants to:

• Search for a Google Web Font using the search field.
• Browse a comprehensive list of available Google Fonts.
• View the font category, such as Sans-serif, Serif, Display, Handwriting, or Monospace, before selecting a font.
• Select the preferred Google Web Font for their website.
• Save the selected font by clicking the Save Web Font button.

Once the font is saved, it becomes available for use in the Web Font configuration and can be applied to the Storefront, Admin Panel, or both, depending on the tenant’s configuration.

After saving the selected Google Web Font and configuring it for the desired section, the font is automatically applied to the tenant’s website.

When Enable for Storefront is activated, the selected Google Web Font is applied across the Storefront, providing customers with a consistent and branded shopping experience.

Enabling Enable for Admin applies the selected Google Web Font to the Admin Panel, improving readability and creating a personalized administrative interface.

When both options are enabled, the selected Google Web Font is reflected across both the Storefront and the Admin Panel, ensuring a consistent typography experience throughout the tenant website.

• Admin Panel

• Storefront

So, that was a bit about the Bagisto Marketplace store pickup. For any queries or doubts, reach out to us at support@webkul.com. You can also raise a ticket at our HelpDesk System.