Use your own fonts in Türchen.com
Especially when it comes to branding, there is no getting around your own corporate typeface. If you think of brands like Mercedes, the font is already a distinctive mark. And of course you don't have to do without this brand feature in a Türchen.com calendar!
But how do you do it exactly? We have put together a step-by-step guide for you here.
For your Türchen.com calendar, from the design package included in the business version onwards, we already offer over 1000 Google Fonts as standard, which you can select simply by clicking. The following guide refers to special fonts that are not included.
Requirements
To use your own fonts, you need either Türchen Business with the "White-Label" feature or Türchen Premium. In the latter, the feature is already included. You can find the white label add-on in the extensions section:
If this feature is active, you will find the corresponding menu item in the editor:
Integrate the fonts
There are two different approaches to embedding fonts, depending on how the font is available. If it is integrated via a service, e.g. Google Fonts or Adobe Typekit, then you have to integrate it via a separate script. If you have a .woff and .woff2 file (both are required for this to work on all browsers), then the integration works via CSS.
Integrate via own scripts
You usually get the code to load the fonts from the service provider. In the example we use a font from Google Fonts.
In the "White-Label" section you will find a tab "own scripts". There you can add a new entry by clicking on "+ add". In the following input mask you can enter everything you need. The data here will also be used to create a cookie banner, which is necessary for using external fonts.
So when writing the "Title" and "Description" texts, keep in mind that they will be read by your calendar users. Checking "Cannot be deselected" will add the script to the cookie banner in the "Required cookies" section.
With a click on "OK" the font can be loaded and used in the calendar. We explain how to do this in the section "Using the font".
Load via CSS
If the font can be loaded via CSS, there is usually no need for a cookie banner. If the required font file is already used on your company's homepage, you can embed it directly. If this is not the case, you have to provide the files via your website. The two font file types .woff and .woff2 are required to make the fonts available on all modern browsers.
The links to the two types then look like this:
https://tuerchen.com/dist/fonts/roboto-light.woff
https://tuerchen.com/dist/fonts/roboto-light.woff2To include the font you have to enter the following rule at "CSS":
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local(''),
url('https://tuerchen.com/dist/fonts/roboto-light.woff2') format('woff2'),
url('https://tuerchen.com/dist/fonts/roboto-light.woff') format('woff');
}Several fonts can also be included. Then the "font-family" or "font-style" or. "font-weight" area also changes.
Using the font
In doors there are usually three areas where different fonts can be used:
- Standard font (‘
font-body’), used for the texts inside the doors and the line below the headline. - Healines (‘
font-headline’) - Door numbers (‘
font-door’)
You can easily override these with a CSS rule. To do this, enter the following in the CSS editor (if used, below the @font-face rule):
.calendar-content{
--font-body: 'Roboto', sans-serif;
--font-headline: 'Roboto', sans-serif;
--font-door: 'Roboto', sans-serif;
}This will use the selected font, here in the example the "Roboto" font, for all three areas. Of course, each area can have its own font. If you want it even more precise, you can style each area of the calendar according to your own wishes via CSS selector.
Tip: Via CSS colors and sizes can also be selected and changed very precisely.
If something is still unclear, then write us an email. The best way is to use our support form.
Please note that you may only use fonts in the calendar for which you have the rights.