Table of Contents

Embed your own font in Sweap

Ingo Updated by Ingo

It must be clarified in advance whether a correct license for the font is available or whether it is a freely available font. For fonts - the same as for images - the right of use must be purchased (see article from Schriftgestaltung.com). In the event that it is not a freely available font, we would ask you to provide us with written proof of the right of use!

In order to embed a new/not yet existing font into a Sweap website, it must first be uploaded to an FTP server so that it can then be retrieved by command (Custom CSS & HTML).

To upload a font to the FTP server, it should be available as a .woff or .woff2 file. Since this is rarely the case, you can convert the files (usually .tif files) with various (free) tools. 
1) Converting the file(s) - in our example with the tool Transfonter

Here, the files are uploaded in the first step and then converted in the second step.

2) Uploading the files to the FTP server

To upload files to the FTP server, there are numerous utilities that can be freely downloaded from the Internet.

After you have established a connection (with the respective tool) to the FTP server, you can unzip the ZIP folder (which in our case was created by the Transfonter tool) and drag and drop the file(s) in question into the desired folders on the FTP server and upload them automatically.

In the FTP folder, only the file "stylesheet.css" is then relevant for the further steps. With a right mouse click you open the internet address for this file to get the information for the following HTML and CSS integration for the Sweap web page generator.

As soon as the internet address is opened, you will see the following view:

font-family: Name of the font

src: url for the integration in the generator

3) Integration into the web page generator

Under the menu item "Custom CSS & JavaScript" you can now enter the name of the font and the url path, so that the generator then uses the new font.

In the "Custom CSS" area, enter the following code:

body, .map .popover {
 font-family: 'font-family xy', Lato, Helvetica, Arial, sans-serif;

and adjust the name in the "font-family xy" area. (see marker)

Afterwards you change to the area "Custom HTML in Head". 

<link rel="stylesheet" type="text/css" href="https://
beispiel.com/account/customer/customerOne/font_font-family xy/stylesheet.css">

Copy the path that you received from the FTP server via "Displaying the website" into the marked area. 

Finally, please save all changes.

ATTENTION: Sometimes it can happen that the CSS fonts are not loaded correctly in the web browser. This is usually due to so-called CORS restrictions in the browsers. You can find out more about CORS and how it can be adjusted here: https://www.hirehop.com/blog/cross-domain-fonts-cors-font-face-issue/

How did we do?

Registration options settings within the Website Wizard

CSS & Java Scripts for website customisation

Contact