Google Fonts

SonoTrix add-on for CS-Cart and Multi-Vendor (srx_google_fonts, version 1.2.1) that lets you search a bundled Google Fonts catalog, activate the families you want, and use them in the Theme Editor and on the storefront.

You can:

• Activate fonts from Design → Google Fonts (no live Google catalog request — the index is bundled with the add-on)
• Pick those fonts in the Theme Editor, in a Google Fonts group next to System Fonts
• Assign one font per language on each storefront, and save that choice from the Theme Editor of the layout you are editing
• Leave a language on Use theme font so it keeps the normal Theme Editor font

Works on CS-Cart and Multi-Vendor.

Install the add-on

1. Download the Google Fonts package (srx_google_fonts).
2. Go to Add-ons → Manage add-ons.
3. Upload, install, and enable the add-on (status ON).
4. Clear the CS-Cart cache once after installation or after an upgrade.

See also: How to Install CS-Cart Add-ons.

Existing stores keep their current Theme Editor font until you assign a language font.

Activate a font

Go to Design → Google Fonts.

1. Filter by script (Arabic, Latin, Cyrillic, and others) and/or style category (sans-serif, serif, display, handwriting, monospace), or type a family name.
2. Click Activate.
3. The family name, CSS URL, and font-face values are generated for you.

Activated fonts are a shared catalog. Every storefront can use them. Turning a font Disabled or deleting it removes it from the Theme Editor list. Deleting a font also removes any language assignment that used it.

Open an activated font to adjust:

Setting	What it does
Optical sizing	auto or none
Weight	A preset (100–900) or a custom value. Default 400.
Style	normal, italic, or oblique
Position	Sort order in the activated list
Status	Active or Disabled

Family name and the Google CSS URL stay read-only. Change the font by activating a different family.

Cloudflare Fonts

If the store uses Cloudflare, turn Cloudflare Fonts OFF (Speed → Optimization → Cloudflare Fonts). When it is on, Cloudflare rewrites Google Fonts links to its own /cf-fonts/ path and the activated fonts can fail to load. After you disable it, purge the Cloudflare cache and hard-refresh the storefront. Fonts should load from fonts.googleapis.com and fonts.gstatic.com.

Use fonts in the Theme Editor

1. Open the storefront layout you want to design. Example: the layout editor with s_layout set to that layout.
2. Open the Theme Editor.
3. Open Fonts.
4. Activated fonts appear in the Google Fonts group, in the same kind of list as System Fonts.
5. Set body, headings, links, and the other Theme Editor font fields as usual. Size, weight, and style from these fields stay in effect.

That Theme Editor choice is one font for the whole style. Use the language section below when Arabic, English, and other installed languages should not share it.

Fonts by language (recommended)

Do this from the Theme Editor of the layout you are editing. The layout belongs to one storefront, and the save applies to that storefront.

1. Stay on Theme Editor → Fonts.
2. Find Fonts by language.
3. For each language installed on that storefront, choose an activated font, or Use theme font.
4. Click Save in the Theme Editor.

Choice	Result on that storefront
An activated font	That language uses this family for body text, headings, links, prices, and buttons.
Use theme font	That language keeps the font already chosen in the Theme Editor.

Size, weight, and style still come from the Theme Editor. Only the font family changes for the assigned language.

Each storefront is independent. Arabic on one storefront can use one family while English on the same storefront, or the same language on another storefront, uses another. Switch layout (s_layout) before you open the Theme Editor when you are setting up a different storefront.

After you save, clear the store cache once if the storefront still shows the previous family, then reload the storefront in that language.

Same settings from the admin list

Design → Google Fonts also has Fonts by language under the activated list.

1. If the shop has more than one storefront, pick the storefront. All storefronts does not save a setup.
2. Choose a font for each language, or Use theme font.
3. Save.

This writes the same setup as the Theme Editor. Use whichever screen you are already in.

What the storefront loads

• Every active font’s stylesheet is loaded, so a Theme Editor family still works.
• When the current storefront and language have an assignment, that family is applied on top of the compiled theme font.
• A language with no assignment is unchanged.

Upgrade notes (1.2.1)

Version 1.2.1 adds per-language fonts per storefront. It does not change fonts you already saved in the Theme Editor until you assign a language.

After you upload the upgrade:

1. Clear the CS-Cart cache.
2. Open Theme Editor → Fonts on the layout you want and set Fonts by language, or set them under Design → Google Fonts.
3. Reload the storefront and switch language. Each language should use the family you saved for that storefront.

If a storefront language switch shows a PHP warning about fn_sort_by_ids / font preload, clear the cache again after this upgrade. The add-on then matches current Google Fonts unicode-range values, including Arabic, so the preload list is not empty.