# 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="../../../more-knowledge/themeware-tools/themeware-customizing-plugin" %}
[themeware-customizing-plugin](https://knowledge.themeware.design/more-knowledge/themeware-tools/themeware-customizing-plugin)
{% 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.\
.png?alt=media)
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