Support-Center | Space

Benutzerdefinierte Schriftarten verwenden

Die Einstellungen befinden sich im ausgewählten Space in Becard Enterprise unter My Space → Layout.
Voraussetzung: Für diese Funktion ist eine Enterprise-Lizenz erforderlich, eventuell sind zusatz Add-Ons nötig.

Mit einer benutzerdefinierten Schriftart kann das Erscheinungsbild der digitalen Visitenkarten an das Corporate Design angepasst werden.

Folgende Quellen werden unterstützt:

Benutzerdefinierte Schriftart aktivieren

Öffne den gewünschten Space.
Navigieren zu My Space → Layout.
Aktiviere die Option Activate Custom Font.
Wähle den gewünschten Anbieter aus:
- Google Fonts
- Adobe Fonts
- Eigene Schriftart
Trage den Namen und die Quelle der Schriftart ein.
Speicher die Änderungen mit Enter.

Die konfigurierte Schriftart wird anschließend automatisch auf den digitalen Visitenkarten des ausgewählten Spaces eingebunden.

Einrichtung mit Google Fonts

Öffne Google Fonts (https://fonts.google.com)
Suche nach der gewünschten Schriftart.
Wähle die benötigten Schriftschnitte aus.
Kopiere den von Google Fonts bereitgestellten CSS-Link.

Ein solcher Link kann beispielsweise wie folgt aussehen:

https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap

Füge den Link in Becard Enterprise in das Feld Font Target ein.
Trage in das Feld Font Name den exakten Namen der Schriftart ein.

Beispiel:

Outfit

Gebe im Feld Font Name ausschließlich den Namen der Schriftart an. Ergänzungen wie serif, sans-serif oder andere Fallback-Schriftarten dürfen nicht eingetragen werden.

Nach dem Speichern wird die Schriftart automatisch geladen und auf den digitalen Visitenkarten verwendet.

Einrichtung mit Adobe Fonts

Öffnen Adobe Fonts. (https://fonts.adobe.com)
Suche nach der gewünschten Schriftart.
Füge die Schriftart zu einem Adobe-Webprojekt hinzu.
Kopiere den von Adobe bereitgestellten CSS-Link des Webprojekts.

Ein Adobe-Fonts-Link kann beispielsweise wie folgt aussehen:

https://use.typekit.net/abc1234.css

Füge den Link in Becard Enterprise in das Feld Font Target ein.
Trage in das Feld Font Name den exakten Namen der Schriftart ein.

Beispiel:

Source Sans Pro

Verwende auch hier ausschließlich den Namen der Schriftart und keine Ergänzungen wie serif oder sans-serif.

Nach dem Speichern wird die Adobe-Schriftart automatisch auf den digitalen Visitenkarten eingebunden.

Stelle sicher, dass Ihre Custom Domain in den Einstellungen des Adobe-Webprojekts freigegeben ist. Andernfalls kann Adobe Fonts das Laden der Schriftart blockieren.

Eigene Schriftarten einrichten

Eigene Schriftarten müssen über einen öffentlich erreichbaren Server bereitgestellt werden.

Voraussetzungen

Für den Space muss eine Custom Domain eingerichtet sein.
Die CSS-Datei und die Schriftdateien müssen über HTTPS erreichbar sein.
Die Dateien muss über dieselbe Domain wie die Custom Domain bereitgestellt werden.
Eine abweichende Subdomain ist möglich.

Beispiel:

Custom Domain:
https://card.example.com

Schriftarten:
https://assets.example.com/fonts/custom-font.css

Wenn die Schriftarten über eine andere Subdomain bereitgestellt werden, muss der Server das Laden der Dateien gegebenenfalls über entsprechende CORS-Header erlauben.

CSS-Datei bereitstellen

Stellen Sie auf Ihrem Server eine CSS-Datei mit einer beliebigen Bezeichnung bereit, zum Beispiel:

https://assets.example.com/fonts/custom-font.css

Diese URL trage in Becard Enterprise in das Feld Font Target ein.

In der CSS-Datei muss die Schriftart über @font-face definiert werden:

@font-face {
  font-family: "Corporate Font";
  src: url("./corporate-font-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Corporate Font";
  src: url("./corporate-font-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

Im Feld Font Name trage anschließend den in der CSS-Datei festgelegten Wert von font-family ein:

Corporate Font

Der Name muss exakt mit der Definition in der CSS-Datei übereinstimmen. Achten Sie dabei auch auf Leerzeichen und die Schreibweise.

Empfohlenes Dateiformat

Wir empfehlen die Verwendung des Formats WOFF2, da es eine gute Browserkompatibilität und eine geringe Dateigröße bietet.

Nach Möglichkeit sollten nur die tatsächlich benötigten Schriftschnitte bereitgestellt werden. Dadurch werden unnötige Downloads vermieden und die Ladezeit der digitalen Visitenkarten verbessert.

Felder im Überblick

Feld	Beschreibung	Beispiel
Provider	Quelle der Schriftart	Google Fonts
Font Target	URL zur CSS-Datei der Schriftart	`https://fonts.googleapis.com/css2?family=Inter...`
Font Name	Exakter Name der Schriftart	`Inter`

Fehlerbehebung

Die Schriftart wird nicht angezeigt

Überprüfe folgende Punkte:

Ist die Option Custom Font aktiviert?
Wurde die Konfiguration gespeichert?
Ist der Name im Feld Font Name korrekt geschrieben?
Ist die URL im Feld Font Target öffentlich erreichbar?
Wird die URL über HTTPS geladen?
Ist die Custom Domain bei Adobe Fonts freigegeben?
Erlaubt der externe Server den Zugriff auf die CSS- und Schriftdateien?
Stimmen die in der CSS-Datei definierten Pfade zu den Schriftdateien?

Die Standardschriftart wird weiterhin angezeigt

In diesem Fall konnte der Browser die benutzerdefinierte Schriftart wahrscheinlich nicht laden. Öffnen Sie die URL aus dem Feld Font Target direkt im Browser und prüfe, ob die CSS-Datei erreichbar ist.

Bei eigenen Schriftarten sollte zusätzlich kontrolliert werden, ob auch die in der CSS-Datei verlinkten .woff2-Dateien öffentlich geöffnet werden können.

Einzelne Schriftschnitte funktionieren nicht

Für jeden verwendeten Schriftschnitt muss eine entsprechende @font-face-Definition vorhanden sein.

Beispiel:

@font-face {
  font-family: "Corporate Font";
  src: url("./corporate-font-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

Fehlt beispielsweise die Definition für font-weight: 700, kann der Browser den fetten Schriftschnitt nicht korrekt darstellen.

Rechtlicher Hinweis

Stelle sicher, dass über die notwendigen Nutzungs- und Webfont-Lizenzen für die verwendete Schriftart verfügt wird.

Dies gilt insbesondere für selbst gehostete oder kommerziell lizenzierte Schriftarten. Becard stellt keine Lizenzen für extern eingebundene Schriftarten bereit.