Ändern Sie die Schriftart Ihrer Events mit benutzerdefiniertem CSS

  • Aktualisiert

7.2.jpg

Wenn Sie die Schriftart in Ihren Events personalisieren möchten, fügen Sie die Option fortgeschrittenes Branding zu Ihrem Hopin-Vertrag hinzu (kontaktieren Sie Ihren Verkaufsberater, falls sie noch nicht enthalten ist). Diese Option ist in unserem Pro-, Business- und Enterprise-Paket enthalten.

Hinweis: Das Ändern der Schriftart wirkt sich nicht auf den Text aus, der auf der Anmeldeseite angezeigt wird. 

Wenn Sie bereit sind, die Schriftart Ihrer Veranstaltung anzupassen, wählen Sie eine Registerkarte aus, die darauf basiert, ob Sie eine privat oder öffentlich gehostete Schriftart verwenden.

Hinweis: Das benutzerdefinierte CSS von Hopin verwendet amerikanisches Englisch (z. B. color, nicht colour).
    1. Stellen Sie sicher, dass Ihre benutzerdefinierte Schriftart auf einer öffentlichen Website gehostet wird, oder wählen Sie eine Schriftart aus Google Fonts (kostenlos) bzw. Adobe Fonts (kostenpflichtig).

    2. Sobald erweitertes Branding für Ihre Organisation verfügbar ist, navigieren Sie zu der Veranstaltung, die Sie brandmarken möchten, gehen Sie zu Ihrem Event-Dashboard > Einrichtung > Thema, klicken Sie auf Erweiterte Einstellungen anzeigen und scrollen Sie zum Ende der Seite zum Feld „Benutzerdefiniertes CSS“.

    Screen_Shot_2020-07-28_at_4.37.44_PM__1_.png

    1. Wenn Sie Google Fonts verwenden, klicken Sie nach Auswahl Ihrer Schriftart auf Diesen Stil auswählen. Klicken Sie im sich rechts öffnenden Fenster auf @import.

    2. Markieren Sie vom @-Symbol bis zum Semikolon (;), wobei Sie sicher sein müssen, dass das Semikolon ausgeschlossen ist. Lassen Sie Ihren „Google Fonts“-Tab offen.

      change_font_css.png

    3. Fügen Sie dies in das Feld Benutzerdefiniertes CSS auf Ihrem Hopin-Ereignis ein.

    Design-Hopin.png

    1. Zurück in Google Fonts, scrollen Sie den Bereich auf der rechten Seite nach unten und kopieren Sie den gesamten Text unter dem Abschnitt „CSS-Regeln, um Familien anzugeben“.

    Fredoka-Google-Fonts.png

    1. Gehen Sie schließlich zum Feld „CSS Anpassungen“ im Dashboard Ihres Hopin-Events. Übertragen Sie den Code aus Google Fonts und fügen Sie einige zusätzliche Codes hinzu:

      * { font-family: 'Fredoka', sans-serif; !important;}

    final_css.png

    1. Klicken Sie auf Speichern. Sehen Sie sich Ihre glänzende neue Schriftart an, indem Sie auf Event-Vorschau oben rechts in Ihrem Browser klicken.
    Hinweis: Das Ändern der Schriftart wirkt sich nicht auf den Text aus, der auf der Registrierungsseite angezeigt wird.
  • @font-face ist eine CSS-Regel, mit der Sie Ihre eigene Schriftart eingeben können, die auf einer Website angezeigt wird, selbst wenn die bestimmte Schriftart nicht auf dem Computer des Besuchers installiert ist.

    1. Definieren Sie zunächst einen Namen für die Schrift (z. B. myFirstFont) und zeigen Sie dann auf die Schriftdatei. zum Beispiel:

    @font-face {
    font-family: myFirstFont;
    src: url('https://page.net/fonts/myFirstFont.otf');
    }

    2. Stellen Sie sicher, dass Sie die Schriftart dem gesamten Text in Ihrer Veranstaltungs zuweisen, wie im folgenden Beispiel:

    * {font-family: 'myFirstFont', sans-serif !important;}

    3. Fügen Sie beide Codes oben in der benutzerdefinierten CSS-Box auf der Seite Setup>Theme Ihres Veranstaltungs-Dashboards ein.

    Screenshot_2022-05-04_at_12.19.43.png

    4. Klicken Sie auf Speichern. Sehen Sie sich Ihre neue Schriftart an, indem Sie auf Veranstaltungsvorschau oben rechts in Ihrem Browser klicken.

    Hinweis: Falls Ihre Schriftart privat gehostet wird und nicht innerhalb der Hopin-Veranstaltung angezeigt wird, stellen Sie bitte sicher, dass Ihre Servereinstellungen korrekt sind, und gestatten Sie, dass diese Informationen abgerufen werden.

Wir stehen Ihnen gerne unter support@hopin.com zur Verfügung, falls Sie Fragen haben oder Hilfe benötigen.

War dieser Beitrag hilfreich?