# Embedding fonts locally using the ThemeWare® Customizing Plugin
This article explains how you can self-host **your own fonts** or **Google Fonts** respectively how to store them locally on your webserver and how to integrate them into your Shopware 6 shop (self-hosted) using our free "ThemeWare® Customizing Plugin".
{% hint style="info" %}
**Note**: Creating a ThemeWare® duplicate is not necessary for template customizations.
{% endhint %}
{% hint style="warning" %}
**Important**: Currently, no individual customizations are possible in the Shopware 6 Cloud!
{% endhint %}
## Introduction
In order to easily deposit the font files and the corresponding CSS customizations you should use a separate extension for individual customizations.
* Please check whether there already is a suitable extension in the [Shopware Community Store](https://store.shopware.com/en/extensions/?p=1\&o=12\&n=21\&c=2069\&shopwareVersion=6).
* Alternatively, you may use the following method with the "ThemeWare® Customizing Plugin".
You will find all information concerning the "ThemeWare® Customizing Plugin", the installation and the download link in the following article:
{% content-ref url="/pages/H9MMWI0BvCOdzt2ujhpr" %}
[ThemeWare® Customizing Plugin](/more-knowledge/themeware-tools/themeware-customizing-plugin.md)
{% endcontent-ref %}
{% hint style="danger" %}
**Attention**: Do Never edit original files of Shopware or any extensions (plugins, apps or themes)!
{% endhint %}
## Embedding fonts manually
### 1. Preparing extension
1. Upload the zip file of our extension via the Shopware 6 extension manager
2. Then install and activate the extension
### 2. Downloading the required Google Fonts
In our example we would like to use the Google font "Titillium Web" for text and headlines in a font weight of "400" and "600". In order to download the fonts, we recommend the free service [google-webfonts-helper](https://gwfh.mranftl.com/fonts).
1. Look for the desired font in the upper left and select it (e.g. "Titillium Web").
2. Enter the required font weights under "**2. Select styles**". (e.g. regular/400 and bold/600)\
3. Specify as folder prefix under "**3. Copy CSS**" the path `/bundles/tcinncustomizing/fonts/`\
4. Download the ZIP archive via the button\
{% hint style="success" %}
**Tip**: If the integration does not work with the path specified under 3., please add the following variable `#{$sw-asset-public-url}` before the path.
**Example**:
`#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/`
{% endhint %}
### 3. Uploading fonts to the server and embedding them
1. Unzip the ZIP archive and upload the fonts via FTP to the plugin folder "**fonts**".\
Folder path: `custom/plugins/TcinnCustomizing/src/Resources/public/fonts/`
2. Open the file "**base.scss**"\
Folder path: `custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/`
3. Deposit the CSS instructions of the fonts from section "**3. Copy CSS**" into the "base.scss" using copy and paste. Additional fonts can easily be added below the previously included CSS codes.\
4. Save the change of the file "base.scss" and upload it again if necessary.
### 4. Configuring ThemeWare®
* Open ThemeWare® in the Theme Management and switch to the Tab "Layout" => Block "Typography" :
1. Enter your font in the "**Text**" and/or "**Headlines**" section. (e.g. "'Titillium Web', sans-serif")
2. Enter your font weights into the section "**Font weight**" (light, normal, bold). (e.g. 400, 400, 600)
3. Deactivate the option "**Import Google Fonts**" in order not to load the fonts from Google servers.
* Save the settings in order to compile the current theme and changes will be transferred to the storefront.
### 5. Loading fonts into the storefront
* In order to load the fonts into the storefront, please deactivate the "ThemeWare® Customizing Plugin" once and activate it again afterwards.
* The desired font should be available in the storefront now.
> As of: Shopware v6.5.0
***
## For example
For the Font "Roboto Condensed", the embedd could be as following:
```scss
// Roboto Condensed
@font-face {
font-family: 'Roboto Condensed';
src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/RobotoCondensed-Light.ttf');
font-optical-sizing: auto;
font-style: normal;
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'Roboto Condensed';
src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/RobotoCondensed-Regular.ttf');
font-optical-sizing: auto;
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Roboto Condensed';
src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/RobotoCondensed-Bold.ttf');
font-optical-sizing: auto;
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'Permanent Marker';
src: url('#{$sw-asset-public-url}/bundles/tcinncustomizing/fonts/static/PermanentMarker-Regular.ttf');
font-optical-sizing: auto;
font-style: italic;
font-weight: 400;
font-display: swap;
}
```
> As of: Shopware v6.6.6
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://knowledge.themeware.design/knowledge-base/tutorials/fonts/embedding-fonts-locally-using-the-themeware-customizing-plugin.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.