Custom Fonts

Creative Elements allows you to upload and use your own custom fonts, giving you complete control over your site's typography. By self-hosting font files on your server, you ensure faster loading times, GDPR compliance, and a unique design that perfectly matches your brand identity.

You can use fonts from any source, such as Google Fonts or premium font foundries, by uploading them directly to your site.

Step 1: Preparing Your Font Files

Before uploading, ensure your font files are in the correct format. While Creative Elements supports multiple formats (TTF, OTF, WOFF), it is highly recommended to use WOFF2 for its superior compression and performance on the web.

Tip: If you only have TTF or OTF files, you can use a free online tool to convert them to the recommended format.

Example: Downloading Fonts from Google Fonts

  1. Visit the Google Fonts website and select a font family.
  2. Choose the specific styles (e.g., Regular 400, Bold 700) you need for your design.
  3. Click the Download Family button to get a ZIP file containing the selected font files.
  4. Unzip the downloaded file on your computer. You will typically find the TTF files inside. Convert these to WOFF2 for best results.
Download from Google Fonts
Select styles and download the font family.

Step 2: Uploading Fonts to Creative Elements

  1. From your PrestaShop admin, navigate to Creative Elements > Fonts & Icons.
  2. Click the Add New button at the top.
  3. Give your font family a name (e.g., "My Brand Font"). This is the name that will appear in the editor's font list.
  4. Under "Add Font Variation," click the Add Item button.
  5. From the Weight and Style dropdowns, select the variation you are about to upload (e.g., Weight: 400, Style: Normal for a regular font).
  6. In the Font Files section, click the Upload button next to the WOFF2 field and select the corresponding font file from your computer.
Upload custom fonts in Creative Elements step 1
Select the Weight and Style, then upload the corresponding font file.
  1. Repeat steps 4-6 for each additional weight or style (e.g., Bold 700, Italic) you want to include in this font family.
  2. Click Save to finish.
Uploading custom font files in Creative Elements
The complete font family with all its variations uploaded.

Step 3: Using Your Custom Fonts

Once your font is uploaded, it is immediately available in all typography controls within the Live Editor. You will find it at the top of the font list under the "Custom" group.

Recommended Method: Setting Fonts in Theme Style

For site-wide consistency, the best practice is to set your new custom font as a global font in Theme Style. This ensures that all your headings, body text, and buttons use the correct font by default.

  1. While in the Live Editor, go to the main menu () and click Theme Style.
  2. Navigate to the Typography section.
  3. Select a text element (e.g., H1 Heading) and click the typography control.
  4. In the "Font Family" dropdown, your new custom font will be at the top. Select it to apply it globally.
© WebshopWorks - Professional PrestaShop Addons