カスタムCSSを使用してイベントのフォントを変更する

  • 更新

Biz_Enter.png

イベントで使用されているフォントをカスタイマイズする場合は、Hopin契約に高度なブランディングを追加します(まだ追加されていな場合は、セールス担当者にお問い合わせください)。 このオプションは、プロ、ビジネス、エンタープライズプランに含まれています。

備考:この設定はイベント内のフォントにのみ反映され、登録ページには反映されません。

イベントのフォントをカスタマイズする準備ができたら、使用フォント(プライベートまたはパブリックにホストされているフォント)に基づいてタブを選択します。

備考:HopinのカスタムCSSにはアメリカ英語を使用します(例:「colour」ではなく「color」を使用)。
    1. カスタムフォントが公開されたサイトでホストされていることを確認するか、フォントをGoogle Fonts(無料)またはAdobe Fonts(有料)から選択します。

    2. 組織で高度なブランディングが利用可能になった後、ブランディングするイベントで[イベントダッシュボード] > [セットアップ] > [テーマ]の順に移動し、[詳細設定を表示]をクリックし、ページ下の[カスタムCSS]フィールドまでスクロールします。

    Screen_Shot_2020-07-28_at_4.37.44_PM__1_.png

    1. Googleフォントを使用している場合は、フォントを選択したら、[このスタイルを選択]をクリックします。右側にウィンドウが開いたら、[@ import]をクリックします。

    2. 「@」記号からセミコロン(「;」)までをハイライト表示します。セミコロンは含めないようにします。 Google Fontsタブは開いたままにします。

      change_font_css.png

    3. これをHopinイベントのカスタムCSSフィールドに貼り付けます。

    Design-Hopin.png

    1. Google Fontsに戻り、右側のパネルを下にスクロールして、[CSSルール]セクションの下にあるすべてのテキストをコピーしてファミリーを指定します。

    Fredoka-Google-Fonts.png

    1. 最後に、Hopinイベントのダッシュボードにある[カスタムCSS]ボックスに戻ります。 Google Fontsからコードを貼り付けて、他のコードを追加します。

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

    final_css.png

    1. 保存]をクリックします。 ブラウザの右上にある[イベントのプレビュー]をクリックして、新しく変更されたフォントを確認します。
    注: フォントを変更しても、[登録]ページに表示されるテキストには影響しません。
  • @ font-faceは、特定のフォントが訪問者のコンピューターにインストールされていない場合でも独自のフォントを入力でき、ウェブサイトに表示されるようにするCSSルールです。

    1. まず、フォント名(myFirstFontなど)を定義し、フォントファイルをポイントします。 例:

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

    2. 次の例のように、イベント内に表示されるすべてのテキストのフォントを指定してください。

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

    3. イベントダッシュボードの「設定」>「テーマページ」の「カスタムCSS」ボックスの上部に両方のコードを貼り付けます。

    Screenshot_2022-05-04_at_12.19.43.png

    4. 「保存」をクリックします。ブラウザの右上にある「イベントをプレビュー」をクリックして、新しいフォントを確認します。

    注: フォントがプライベートにホストされていて、Hopinイベント内に表示されない場合は、サーバー設定が正しいことを確認し、この情報を取得できるようにしてください。

ご質問がある場合やサポートが必要な場合は、support@hopin.comまでお気軽にお問い合わせください。

この記事は役に立ちましたか?