Zenit Design - Themes
Buy themeThemesSupport
EN
EN
  • First steps
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tips
    • Dashboard
    • Theme configuration
    • Dictionary
    • Multiple sales channels
  • Configuration sets
  • Support
    • Read errors
    • Find cause
  • 🎨Styling
    • General
      • Basic layout
      • Product images
      • Produkt Layout-Typ
      • Global background
      • Preloader
      • Accent line
      • Scroll animation
    • Typo & Colors
      • Theme colors
      • Status messages
      • Fonts
      • Typography
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Search
      • Top bar
      • Shop navigation
      • Main navigation
      • Flyout navigation
      • Dropdown navigation
    • Footer
      • Footer
      • Content
      • Columns
      • Columns styling
      • Footer bottom
    • Components
      • Sidebar
      • Sidebar navigation
      • Forms
      • Image & gallery slider
      • Produkt slider
      • Category Listing Slider
      • Pagination
      • Breadcrumbs
      • Cookie banner
      • Offcanvas
      • Backdrop
      • Scroll-Up button
    • Category
      • Category header
      • Hero section
      • Filter
      • Listing actions
      • Product boxes
      • Quickview
    • Product
      • Detail
      • Gallery
      • Description
      • Description navigation
      • Description content
    • Checkout
      • Cart
      • Checkout
  • ⚙️SETTINGS
    • Basic settings
    • Custom field assignment
      • Custom fields for product page details
      • Custom fields for product datasheets
    • Social media icons
    • Marketing text slider
    • Custom tab details page
    • Custom footer columns
    • Custom code
  • 📂Contents
    • Shopping experiences
      • Sections
      • Blocks
        • Elements
          • Image text slider
          • Search banner
          • Text banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Divider
          • Category-navigation
          • Footer navigation
          • Placeholder
        • Commerce
          • Image gallery and buy box with product name & manufacturer logo
          • Image gallery and buy box with product name & manufacturer logo & description
          • Image gallery and buy box with description
          • Image gallery with description and buy box with product name & manufacturer logo
        • Category
          • Category listing
        • Columns
        • Layouts
      • Block inner spacings
      • Block outer spacings
      • Animations
      • CSS Variables
    • Category
      • Hero section
      • Category header
      • CSS classes
      • Category badges
      • Category Icons
      • Products per row
    • Product page
      • Layouts
      • Default layout
      • Gallery mode
      • Custom tabs
      • Videos tab
      • Datasheets
    • Product images
      • Image sizes
      • Aspect ratio
      • File format
      • Product image background
    • Layout type
    • Responsive tables
    • Multilingualism
  • 🎓Tutorials
    • Demodata import
    • Demo theme configuration import
    • Duplicate Child-Theme
    • Customizations
    • Configuration export/import
    • Custom Fields export/import
    • Embed fonts locally
    • Embed fonts locally with child-theme
  • 🛠️Update Guides
    • Child theme update
    • Shopware 6.7.0.0
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Overview
    • Accessibility
      • Typography
      • Colors
      • Images
      • Video
      • Accessibility checker and resources
    • General
      • Copyright notice
      • Wishlist
    • Product layout
    • Licenses
      • Trial version vs full version
      • Changing the licence domain
    • Derivations
      • Child theme
      • Theme duplicate
      • Child theme vs theme duplicate
    • Updates
      • Theme is displayed as incompatible
      • Update is not displayed
    • Known issues
      • Could not assign child-theme
      • Text modules show technical name
      • Theme save error
      • SVG logo is not displayed
      • Search / Input mobile zoom
      • Text is not visible / readable
Powered by GitBook
On this page
  • Embed fonts locally
  • 1. Choose font
  • 2. Insert CSS
  • 3. Upload fonts to the server
  • 4. Theme configuration

Was this helpful?

  1. Tutorials

Embed fonts locally

How to embed Google Fonts locally

Last updated 1 year ago

Was this helpful?

These instructions can be used for Google Fonts and other custom fonts.

For this tutorial, the use of a child theme is not necessary. If you want to use a child theme, use the instructions for .

Embed fonts locally

Instead of loading the fonts from the Google server, you can also place them locally on your own server and embed them. You can also use this tutorial to include your own webfonts in your store.

In this tutorial, the fonts are placed in the public folder of your Shopware installation.

1. Choose font

To download the fonts as web fonts from Google Fonts, you can use the free service of .

Enter the name of the font you want (in this example it is "Raleway") in the search (1) and select the font from the suggestions (2).

You can then choose font styles (3) of the font.

2. Insert CSS

Create a CSS file locally with the name of the font, e.g. raleway.css and copy the CSS code from the gray box into this file.

Connect to your online store via FTP client and navigate to the {root}/public/css folder. Load the raleway.css file into the css folder of your Shopware 6 installation.

In the administration of your Shopware shop, open the settings (plugin/app configuration) of pur theme under Extensions > My Extensions > Tab: Themes > Theme [Variant] > Context Menu: Configuration

Enable custom CSS files (1) and insert the link to the CSS file in the text field (2). Resources in the public folder of your installation can be accessed with a relative path.

<link rel="stylesheet" href="/css/raleway.css" >

3. Upload fonts to the server

Under Step 4 - "Download files" you can download a zip file of the fonts.

Unzip the downloaded ZIP archive with the fonts on your computer and upload the individual font files via FTP client to the {root}/public/fonts folder of your Shopware installation.

4. Theme configuration

Disable connection to Google Fonts

Now you have to tell the theme that the fonts you would like to use should not be loaded from the Google servers. Uncheck the checkbox Load fonts from Google (1).

Assign fonts

In order to use the Custom font fields (Google Fonts or self-hosted), the Font-type text (5) and Font -type headline (6) fields must be set to the value - --- Use 'Custom fonts' ---.

The Font weights (3, 4) do not need to be specified here, as they are defined in the CSS code from step 2 and were only used for loading via the Google servers.

Enter the name of the fonts, e.g. 'Raleway', sans-serif including the into the fields Font type text (1) and Font type headline (2). Font type text and Font type headline can of course be different font families.

🎓
generic font-family
integration with child-theme
Herokuapp
google webfonts helper
Schriften laden deaktivieren, damit keine Verbindung mehr zu Google aufgebaut wird.