{"id":194854,"date":"2019-08-31T11:41:21","date_gmt":"2019-08-31T11:41:21","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=194854"},"modified":"2026-09-11T13:53:49","modified_gmt":"2026-09-11T13:53:49","slug":"laravel-ecommerce-google-web-fonts","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/","title":{"rendered":"Laravel eCommerce Google Web Fonts"},"content":{"rendered":"\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\"><strong>Laravel eCommerce Google Web Fonts for Bagisto<\/strong><\/h3><\/div><div class=\"margin-bottom-50\">\n<p>The <strong>Bagisto Laravel eCommerce Google Web Fonts<\/strong> module lets the admin apply any Google font to the storefront, the admin panel, or both.<\/p>\n\n\n\n<p>With this module, the admin can browse the live Google Fonts catalogue and preview each font in its own typeface.<\/p>\n\n\n\n<p>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 <a href=\"https:\/\/devdocs.bagisto.com\/\">Bagisto<\/a> v2.4.10.<\/p>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\"><strong>Features of Bagisto Laravel eCommerce Google Web Fonts<\/strong><\/h3><\/div><div class=\"margin-bottom-50\">\n<ul class=\"wp-block-list\">\n<li><strong>Separate targets:<\/strong> apply the active font to the admin panel, the storefront, or both.<\/li>\n\n\n\n<li><strong>Live font catalogue:<\/strong> browse the complete Google Fonts list and search it by family or category.<\/li>\n\n\n\n<li><strong>Font preview:<\/strong> every font in the list appears in its own typeface before you save it.<\/li>\n\n\n\n<li><strong>Add several fonts at once:<\/strong> select multiple fonts in one go, while fonts that already exist are skipped.<\/li>\n\n\n\n<li><strong>One active font:<\/strong> activating a font asks for confirmation and deactivates the previous one automatically.<\/li>\n\n\n\n<li><strong>Module switch:<\/strong> enable or disable the whole module from the configuration.<\/li>\n\n\n\n<li><strong>Font management:<\/strong> delete a single font, or select several fonts and delete them together.<\/li>\n\n\n\n<li><strong>Instant storefront update:<\/strong> the module clears the full page cache whenever a font is activated or deleted.<\/li>\n\n\n\n<li><strong>Access control:<\/strong> admin roles decide who can manage <strong>Appearance \u2192 Web Font<\/strong>.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\"><strong>Installation of the module Laravel eCommerce Google Web Fonts<\/strong><\/h3><\/div><div class=\"margin-bottom-50\">\n<ul class=\"wp-block-list\">\n<li>Unzip the respective extension zip and then merge the \u201c<strong>packages<\/strong>\u201d folder into the project root directory.<\/li>\n\n\n\n<li>Open the root <code>composer.json<\/code> and add the namespace under <code>autoload.psr-4<\/code>:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<pre class=\"EnlighterJSRAW\">&quot;Webkul\\\\Webfont\\\\&quot;: &quot;packages\/Webkul\/Webfont\/src&quot;<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Refresh the autoloader:<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">composer dump-autoload<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Register the service provider in <code>bootstrap\/providers.php<\/code>:<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">Webkul\\Webfont\\Providers\\WebfontServiceProvider::class,<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Run the commands below to run the migrations, publish the assets and clear the caches:<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">php artisan webfont:install\n\nphp artisan optimize:clear<\/pre>\n\n\n\n<p>That\u2019s it. The service provider registers everything else itself, so no <code>config\/concord.php<\/code> entry is needed. Now just run the project on your specified domain.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\"><strong>How to generate API key?<\/strong><\/h3><\/div><div class=\"margin-bottom-50\">\n<p>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.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <strong><a href=\"https:\/\/developers.google.com\/fonts\/docs\/developer_api\" target=\"_blank\" rel=\"noreferrer noopener\">Google Fonts Developer API<\/a><\/strong> documentation.<\/li>\n\n\n\n<li>Click on the <strong>Get a Key<\/strong> button, then select or create a Google Cloud project.<\/li>\n\n\n\n<li>Copy the generated key, which the admin then pastes into the module configuration.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1300\" height=\"666\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png\" alt=\"Generating a Google Fonts Developer API key\" class=\"wp-image-194895\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png 1300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png 1200w\" sizes=\"(max-width: 1300px) 100vw, 1300px\" loading=\"lazy\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\"><strong>Admin configuration<\/strong><\/h3><\/div><div class=\"margin-bottom-50\">\n<p>After the successful installation, the admin navigates to <strong>Configure &gt;&gt; General &gt;&gt; Design<\/strong>. There, the <strong>Web Font<\/strong> section holds the following fields:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Status:<\/strong> turns the module on or off. The remaining fields appear only once it is switched on.<\/li>\n\n\n\n<li><strong>API Key:<\/strong> the Google Fonts Developer API key, required while the module is enabled.<\/li>\n\n\n\n<li><strong>Enable for Admin:<\/strong> set it to Active to apply the active font to the admin panel.<\/li>\n\n\n\n<li><strong>Enable for Storefront:<\/strong> set it to Active to apply the active font to the storefront.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large wp-duotone-unset-1\"><img decoding=\"async\" width=\"1120\" height=\"880\" data-id=\"557198\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-configuration-1.webp\" alt=\"Bagisto Google Web Fonts module configuration under Configure General Design\" class=\"wp-image-557198\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-configuration-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-configuration-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-configuration-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-configuration-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Step-by-Step: Configure the Web Font Module<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>First, go to <strong>Configure &gt;&gt; General &gt;&gt; Design<\/strong>.<\/li>\n\n\n\n<li>Next, switch on <strong>Status<\/strong> in the <strong>Web Font<\/strong> section.<\/li>\n\n\n\n<li>Then paste your Google Fonts key into <strong>API Key<\/strong>.<\/li>\n\n\n\n<li>Choose Active or Inactive for <strong>Enable for Admin<\/strong> and <strong>Enable for Storefront<\/strong>.<\/li>\n\n\n\n<li>Finally, click on the <strong>Save Configuration<\/strong> button.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\"><strong>How to set Font style?<\/strong><\/h3><\/div><div class=\"margin-bottom-50\">\n<p>To manage fonts, the admin navigates to <strong>Appearance &gt;&gt; Web Font<\/strong>. This page lists every saved font with its ID, font name and status.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-3\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-list-1.webp\" alt=\"Bagisto Google Web Fonts module list of saved fonts under Appearance Web Font\" class=\"wp-image-557214\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-list-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-list-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-list-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-list-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Clicking on the <strong>Add Web Font<\/strong> button opens the font catalogue. Here, the admin searches for fonts, previews each one in its own typeface and selects as many as needed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-4\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-add-modal-1.webp\" alt=\"Bagisto Google Web Fonts module confirmation dialog before activating a font\" class=\"wp-image-557216\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-add-modal-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-add-modal-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-add-modal-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-add-modal-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>After saving, the new fonts appear in the list as <strong>Inactive<\/strong>. Next, clicking on the <strong>check icon<\/strong> of a font opens a confirmation dialog.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-5\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-activate-confirm-1.webp\" alt=\"Bagisto Google Web Fonts module confirmation dialog before activating a font\" class=\"wp-image-557219\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-activate-confirm-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-activate-confirm-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-activate-confirm-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-activate-confirm-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Once the admin clicks on <strong>Agree<\/strong>, that font becomes <strong>Active<\/strong> and every other font turns inactive. Because only one font can be active, the store always uses a single typeface.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-6\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-active-2.webp\" alt=\"Bagisto Google Web Fonts module list showing the activated font\" class=\"wp-image-557218\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-active-2.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-active-2-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-active-2-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-active-2-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Step-by-Step: Add and Activate a Web Font<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Appearance &gt;&gt; Web Font<\/strong>.<\/li>\n\n\n\n<li>Click on the <strong>Add Web Font<\/strong> button.<\/li>\n\n\n\n<li>Type a name in <strong>Select Fonts<\/strong> and click on the fonts you want; each one appears as a chip.<\/li>\n\n\n\n<li>After that, click on the <strong>Save Web Font<\/strong> button.<\/li>\n\n\n\n<li>In the list, click on the <strong>check icon<\/strong> of the font to use.<\/li>\n\n\n\n<li>Lastly, click on <strong>Agree<\/strong> to activate it.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step-by-Step: Delete Web Fonts<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>To delete one font, click on its <strong>delete icon<\/strong> in <strong>Appearance &gt;&gt; Web Font<\/strong>, then click on <strong>Agree<\/strong>.<\/li>\n\n\n\n<li>To delete several fonts, tick their checkboxes and choose <strong>Delete<\/strong> from the <strong>Select Action<\/strong> menu.<\/li>\n\n\n\n<li>Then confirm the deletion by clicking on <strong>Agree<\/strong>.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\"><strong>Store front layout<\/strong><\/h3><\/div><div class=\"margin-bottom-50\">\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-7\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-storefront.webp\" alt=\"Bagisto Google Web Fonts module storefront displayed in the active Google font\" class=\"wp-image-557205\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-storefront.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-storefront-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-storefront-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-storefront-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Step-by-Step: Apply the Font to the Storefront<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Make sure <strong>Status<\/strong> is on and <strong>Enable for Storefront<\/strong> is set to Active.<\/li>\n\n\n\n<li>Activate a font in <strong>Appearance &gt;&gt; Web Font<\/strong>.<\/li>\n\n\n\n<li>Then open the storefront to see the new font.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><h3 class=\"index-title\"><strong>Admin Panel<\/strong> layout<\/h3><\/div><div class=\"margin-bottom-50\">\n<p>Similarly, the admin panel uses the active font when <strong>Enable for Admin<\/strong> is set to Active, as shown in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full wp-duotone-unset-8\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-admin-panel.webp\" alt=\"admin dashboard displayed in the active Google font\" class=\"wp-image-557206\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-admin-panel.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-admin-panel-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-admin-panel-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/blog-webfont-admin-panel-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Step-by-Step: Apply the Font to the Admin Panel<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Set <strong>Enable for Admin<\/strong> to Active in <strong>Configure &gt;&gt; General &gt;&gt; Design<\/strong>.<\/li>\n\n\n\n<li>Activate a font in <strong>Appearance &gt;&gt; Web Font<\/strong>.<\/li>\n\n\n\n<li>Next, reload any admin page to see the font applied.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Support<\/h3>\n<\/div><\/div>\n\n\n\n<p>So, that was all about the Bagisto Laravel eCommerce Google Web Fonts module. For any queries or doubts, reach out to us at <a href=\"mailto:support@webkul.com\" target=\"_blank\" rel=\"noreferrer noopener\">support@webkul.com<\/a>. You can also raise a ticket at our <strong><a href=\"https:\/\/webkul.uvdesk.com\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">HelpDesk System.<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>That\u2019s it. The service provider registers everything else itself, so no config\/concord.php entry is needed. Now just run the project on your specified domain. So, that was all about the Bagisto Laravel eCommerce Google Web Fonts module. For any queries or doubts, reach out to us at support@webkul.com. You can also raise a ticket at <a href=\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":267,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8396,8929],"tags":[8055,8054,9702,9595,9597],"class_list":["post-194854","post","type-post","status-publish","format-standard","hentry","category-bagisto","category-e-commerce-bagisto","tag-bagisto","tag-laravel-ecommerce","tag-laravel-ecommerce-google-webfonts","tag-laravel-ecommerce-platform","tag-open-source"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Laravel eCommerce Google Web Fonts - Webkul Blog<\/title>\n<meta name=\"description\" content=\"With the help of the Laravel eCommerce Google web fonts, the admin can change the fonts for the admin panel as well as the front panel.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Laravel eCommerce Google Web Fonts - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"With the help of the Laravel eCommerce Google web fonts, the admin can change the fonts for the admin panel as well as the front panel.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-31T11:41:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-11T13:53:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png\" \/>\n<meta name=\"author\" content=\"Simant Verma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simant Verma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/\"},\"author\":{\"name\":\"Simant Verma\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/63f64723fe98f166757f7903d1f7e7e0\"},\"headline\":\"Laravel eCommerce Google Web Fonts\",\"datePublished\":\"2019-08-31T11:41:21+00:00\",\"dateModified\":\"2026-09-11T13:53:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/\"},\"wordCount\":911,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png\",\"keywords\":[\"Bagisto\",\"Laravel eCommerce\",\"Laravel ecommerce google webfonts\",\"laravel eCommerce platform\",\"open source\"],\"articleSection\":[\"Bagisto\",\"E commerce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/\",\"url\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/\",\"name\":\"Laravel eCommerce Google Web Fonts - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png\",\"datePublished\":\"2019-08-31T11:41:21+00:00\",\"dateModified\":\"2026-09-11T13:53:49+00:00\",\"description\":\"With the help of the Laravel eCommerce Google web fonts, the admin can change the fonts for the admin panel as well as the front panel.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png\",\"width\":1300,\"height\":666},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel eCommerce Google Web Fonts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/63f64723fe98f166757f7903d1f7e7e0\",\"name\":\"Simant Verma\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7d1724606c049d771b8373de3119b9fde5f988195eb2e7d951f4acafa583388c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7d1724606c049d771b8373de3119b9fde5f988195eb2e7d951f4acafa583388c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Simant Verma\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/simantverma-bd183\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Laravel eCommerce Google Web Fonts - Webkul Blog","description":"With the help of the Laravel eCommerce Google web fonts, the admin can change the fonts for the admin panel as well as the front panel.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/","og_locale":"en_US","og_type":"article","og_title":"Laravel eCommerce Google Web Fonts - Webkul Blog","og_description":"With the help of the Laravel eCommerce Google web fonts, the admin can change the fonts for the admin panel as well as the front panel.","og_url":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2019-08-31T11:41:21+00:00","article_modified_time":"2026-09-11T13:53:49+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png","type":"","width":"","height":""}],"author":"Simant Verma","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Simant Verma","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/"},"author":{"name":"Simant Verma","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/63f64723fe98f166757f7903d1f7e7e0"},"headline":"Laravel eCommerce Google Web Fonts","datePublished":"2019-08-31T11:41:21+00:00","dateModified":"2026-09-11T13:53:49+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/"},"wordCount":911,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png","keywords":["Bagisto","Laravel eCommerce","Laravel ecommerce google webfonts","laravel eCommerce platform","open source"],"articleSection":["Bagisto","E commerce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/","url":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/","name":"Laravel eCommerce Google Web Fonts - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png","datePublished":"2019-08-31T11:41:21+00:00","dateModified":"2026-09-11T13:53:49+00:00","description":"With the help of the Laravel eCommerce Google web fonts, the admin can change the fonts for the admin panel as well as the front panel.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/google-web-fonts-laravel.png","width":1300,"height":666},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/laravel-ecommerce-google-web-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Laravel eCommerce Google Web Fonts"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/63f64723fe98f166757f7903d1f7e7e0","name":"Simant Verma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7d1724606c049d771b8373de3119b9fde5f988195eb2e7d951f4acafa583388c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7d1724606c049d771b8373de3119b9fde5f988195eb2e7d951f4acafa583388c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Simant Verma"},"url":"https:\/\/webkul.com\/blog\/author\/simantverma-bd183\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/194854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/267"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=194854"}],"version-history":[{"count":22,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/194854\/revisions"}],"predecessor-version":[{"id":557221,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/194854\/revisions\/557221"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=194854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=194854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=194854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}