> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/more-knowledge/fonts.md). # Fonts ThemeWare® comes with a selection of fonts. They sit on your own web server and are loaded from there – without an API and without a connection to third parties. This article shows you which fonts these are and how to fine-tune their size. {% hint style="info" %} **Note**: Everything about **Google Fonts** – how to check whether your shop loads fonts from Google, and how to change that – is collected in the ThemeWare® Knowledge Base: {% endhint %} ## Bundled fonts As the Google Fonts library now offers more than 900 fonts (over 5,000 fonts), we unfortunately cannot integrate all fonts into ThemeWare®. In ThemeWare®, all fonts used by ThemeWare® are part of every theme. This means that 14+1 fonts are available in each theme:
Cover image
Inter (default)Fonttype: 'Inter', sans-serifFont weights: 400, 600, 700e.g. ThemeWare® Moderntwt-font-inter.png
EnglebertFonttype: 'Englebert', sans-serifFont weight: 400e.g. ThemeWare® Biotwt-font-englebert.png
Exo 2Fonttype: 'Exo 2', sans-serifFont weights: 300, 400, 500, 600, 700e.g. ThemeWare® Biketwt-font-exo-2.png
LoraFonttype: 'Lora', serifFont weights: 400, 500, 600, 700New v5.2.0
serif, also for body text		twt-font-lora.png
MontserratFonttype: 'Montserrat', sans-serifFont weights: 300, 400, 500, 600, 700e.g. ThemeWare® Cleantwt-font-montserrat.png
Open SansFonttype: 'Open Sans', sans-serifFont weights: 300, 400, 500, 600, 700e.g. ThemeWare® Livingtwt-font-open-sans.png
OswaldFonttype: 'Oswald', sans-serifFont weights: 300, 400, 500, 600, 700e.g. ThemeWare® Strongtwt-font-oswald.png
Playfair DisplayFonttype: 'Playfair Display', serifFont weights: 400, 500, 600, 700, 800, 900New v5.2.0
for headlines		twt-font-playfair-display.png
RobotoFonttype: 'Roboto', sans-serifFont weights: 300, 400, 500, 600, 700e.g. ThemeWare® Strongtwt-font-roboto.png
Roboto SlabFonttype: 'Roboto Slab', sans-serifFont weights: 300, 400, 500, 600, 700e.g. ThemeWare® Bathtwt-font-roboto-slab.png
SenFonttype: 'Sen', sans-serifFont weights: 400, 500, 600, 700New v5.2.0twt-font-sen.png
Source Sans 3Fonttype: 'Source Sans 3', sans-serifFont weights: 300, 400, 500, 600, 700e.g. ThemeWare® Livingtwt-font-source-sans-3.png
Source Serif 4Fonttype: 'Source Serif 4', serifFont weights: 300, 400, 500, 600, 700New v5.2.0
serif, also for body text		twt-font-source-serif-4.png
Titillium WebFonttype: 'Titillium Web', sans-serifFont weights: 300, 400, 600, 700e.g. ThemeWare® Lightstwt-font-titillium-web.png
UbuntuFonttype: 'Ubuntu', sans-serifFont weights: 300, 400, 500, 700e.g. ThemeWare® Outdoortwt-font-ubuntu.png
Further fonts will follow later...
{% hint style="info" %} **A note on "Source Sans Pro"**: Adobe has retired this font, and it is no longer listed on Google Fonts. Its successor is **Source Sans 3** - the same design, still maintained. If you keep using `'Source Sans Pro', sans-serif`, it continues to work: ThemeWare® serves the Source Sans 3 files for it. For new shops, `'Source Sans 3', sans-serif` is the value to use. {% endhint %}

All fonts bundled with ThemeWare®

ThemeWare® automatically checks whether a locally available "default font" has been specified in the configuration fields for the fonttype. If this is the case, it is loaded directly from your own server ("locally") in compliance with the GDPR. Please note which fonts are included in ThemeWare® (see the overview above) and which configuration values you should ideally use – for example: `'Open Sans', sans-serif` > ThemeWare® font configuration can be found here: > > * Tab "Layout" => Block "Typography" => Section "Text" => Fonttype > * Tab "Layout" => Block "Typography" => Section "Headlines" => Fonttype If you specify a font that is not part of ThemeWare® and has not been embedded manually, the browser will use a so-called "fallback font" instead – this is a system font that is available locally on the visitor's device (e.g. Arial, Helvetica or Times New Roman). ## Size adjustment per font Not every font looks the same size at the same font size. Some typefaces draw their letters lower or narrower than others and therefore look smaller, without anything being wrong with the font size itself. That is what the size adjustment is for - one field each for the text and the headline font: Tab "Layout" => Block "Typography" => Section "Text" => "Size adjustment" Tab "Layout" => Block "Typography" => Section "Headlines" => "Size adjustment" The value belongs to the font, not to the role: it applies everywhere that font appears in your shop. If you enter the same font in both fields, there is only one font and therefore only one value: whichever field you filled in is the one that counts. If both fields hold different values, the one from the "Text" section applies. ### Reference values The following values are starting points, measured against Inter as the reference font. The default is always `100`, so nothing changes in existing shops unless you enter something. | Font | Reference value | Why | | ---------------- | --------------- | -------------------------------------------------------- | | Inter | `100` | reference font - comes from Shopware, cannot be adjusted | | Englebert | `115` | runs narrow and therefore looks small | | Exo 2 | `110` | small x-height | | Lora | `105` | small x-height | | Montserrat | `105` | - | | Open Sans | `100` | - | | Oswald | `100` | narrow display typeface, intentionally so | | Playfair Display | `105` | - | | Roboto | `105` | - | | Roboto Slab | `105` | - | | Sen | `110` | small cap height | | Source Sans 3 | `110` | small cap height | | Source Serif 4 | `110` | small cap height | | Titillium Web | `105` | - | | Ubuntu | `105` | - | {% hint style="warning" %} The adjustment enlarges the letters, not the areas around them. A button or a badge keeps its height, because the line height follows the font size and that stays unchanged. The text grows, the distance to the edge shrinks. The width does grow along with it - after a change, check buttons, badges and the navigation. Values from `75` to `125` are possible. From around `120` onwards, the lines of multi-line body text visibly move closer together, because the line spacing stays unchanged as well. {% endhint %} {% hint style="info" %} The size adjustment does not apply to **Inter**: this font comes from Shopware itself, and we do not write anything into its declaration. It likewise does not apply when "Import Google Fonts" is enabled or when you embed a font of your own. {% endhint %} ## Using your own fonts If you would like to use a font that ThemeWare® does not include, you embed it locally on your web server. You will find the matching tutorials in the ThemeWare® Knowledge Base: {% embed url="" %} ThemeWare® Knowledge Base => Fonts {% endembed %} #### Further information * Knowledge Base: [Google Fonts](https://knowledge.themeware.design/more-knowledge/google-fonts) * Basic knowledge: [Font configuration](https://knowledge.themeware.design/knowledge-base/basic-knowledge/font-configuration) * Introduction: [Configuring fonts](https://knowledge.themeware.design/knowledge-base/introduction/configuring-fonts) * Tutorial: [Embedding fonts locally](https://knowledge.themeware.design/knowledge-base/tutorials/fonts/embedding-fonts-locally) * Tutorial: [Embedding fonts locally using the ThemeWare® Customizing Plugin](https://knowledge.themeware.design/knowledge-base/tutorials/fonts/embedding-fonts-locally-using-the-themeware-customizing-plugin)