Custom Fonts Plugin

View Plugin

The DmfCustomFonts plugin enables the use of custom fonts in your Shopware 6 shop. You can upload your own font files or choose from 16 pre-installed Google Fonts.

On this page:

• Requirements
• Installation
• Features
• Configuration
  • Font File Format
• Usage
  • Upload Custom Fonts
  • Pre-installed Google Fonts
• Console Commands
  • dmf:fonts:generate
• Technical Details
  • CSS Generation
  • Event Listener
• Troubleshooting
  • Font not displaying
  • CSS not loading

---

Requirements

• Shopware 6.7.0 or higher
• PHP 8.2 or higher

Installation

composer require dmf/plugin-custom-fonts
bin/console plugin:install --activate DmfCustomFonts
bin/console cache:clear

---

Features

• Two Font Slots: Normal Font (body text) and Headline Font (headings)
• Custom Font Files: Support for .woff and .woff2 formats
• Font-Weight Support: Define different font weights per font
• Automatic CSS Generation: CSS is automatically created and included
• 16 Google Fonts: Pre-installed selection of popular fonts
• Inline or File: CSS can be included inline or as a separate file

---

Configuration

Path: Settings → System → Plugins → Custom Fonts → Configuration

Option	Type	Default	Description
includeAsFile	Boolean	false	Include CSS as separate file (default: inline)
normalFontName	Text	-	Name of the font for body text
normalFontFiles	Textarea	-	Font files with weight (format: filename.woff2 400)
headlineFontName	Text	-	Name of the font for headings
headlineFontFiles	Textarea	-	Headline font files with weight

Font File Format

Enter one font file per line with optional font-weight:

OpenSans-Regular.woff2 400
OpenSans-Bold.woff2 700
OpenSans-Light.woff2 300

Without weight specification, 400 (normal) is used.

---

Usage

Upload Custom Fonts

1. Upload your font files (.woff, .woff2) to the folder:

   public/bundles/dmfcustomfonts/fonts/

2. Open the plugin configuration in Admin

3. Enter the font name (e.g., MyCustomFont)

4. List the font files with weights:

   MyCustomFont-Regular.woff2 400
   MyCustomFont-Bold.woff2 700

5. Save the configuration

Pre-installed Google Fonts

The plugin includes 16 pre-installed Google Fonts that can be used directly:

Font	Weights	Style
Open Sans	400, 700	Sans-Serif
Bodoni Moda	400, 700	Serif
Figtree	400, 700	Sans-Serif
Fira Sans	400, 700	Sans-Serif
Lato	400, 700	Sans-Serif
Noto Sans	400, 700	Sans-Serif
Nunito	400, 700	Sans-Serif
Playfair	400, 700	Serif
Poppins	400, 700	Sans-Serif
PT Sans	400, 700	Sans-Serif
Roboto	400, 700	Sans-Serif
Roboto Condensed	400, 700	Sans-Serif
Source Sans 3	400, 700	Sans-Serif
Source Serif 4	400, 700	Serif
Space Grotesk	400, 700	Sans-Serif
Work Sans	400, 700	Sans-Serif

---

Console Commands

dmf:fonts:generate

Manually regenerate the font CSS file.

bin/console dmf:fonts:generate

This command runs automatically on:

• Plugin activation
• Plugin update
• Configuration change

---

Technical Details

CSS Generation

The plugin automatically generates @font-face rules based on your configuration:

@font-face {
    font-family: 'MyCustomFont';
    src: url('/bundles/dmfcustomfonts/fonts/MyCustomFont-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

Event Listener

The plugin responds to SystemConfigMultipleChangedEvent and automatically regenerates CSS on configuration changes.

---

Troubleshooting

Font not displaying

1. Check if font files are in the correct folder
2. Run bin/console assets:install
3. Clear cache: bin/console cache:clear
4. Regenerate CSS: bin/console dmf:fonts:generate

CSS not loading

Ensure the file path is correct:

public/bundles/dmfcustomfonts/fonts/[your-font-file].woff2