Używaj czcionek marki na stronach kreatora.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

Kreator DXPR nie ma własnego ustawienia czcionek: tekst na stronach kreatora używa czcionek twojego motywu. Aby je zmienić, wczytujesz font internetowy w motywie i kierujesz na niego CSS motywu. Na końcu każda strona kreatora pokazuje czcionkę marki, w edytorze i u odwiedzających. Jeśli witryna działa na motywie DXPR, wybierz czcionki w jego ustawieniach motywu.

Zanim zaczniesz

  • Potrzebujesz dostępu do plików motywu; użyj własnego motywu albo submotywu.
  • Sprawdź, czy licencja czcionki zezwala na użycie w witrynie internetowej.
  • Kroki używają biblioteki global-styling i css/custom.css ze strony własny CSS.

Konfiguracja

  1. Dodaj arkusz stylów czcionki do biblioteki w mytheme.libraries.yml. Dla czcionki Google:

    global-styling:
  css:
    theme:
      'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap': { type: external }
      css/custom.css: {}

  2. Ustaw czcionkę w css/custom.css:

    body {
  font-family: 'Inter', sans-serif;
}

  3. Wyczyść pamięci podręczne w Configuration > Development > Performance (/admin/config/development/performance).

  4. Otwórz stronę w kreatorze i spójrz na element Text.

Hostuj czcionkę samodzielnie

Czcionka hostowana samodzielnie unika żądania do strony trzeciej, co może mieć znaczenie dla przepisów o prywatności.

  1. Pobierz czcionkę w formacie WOFF2 i umieść pliki w katalogu fonts/ motywu.

  2. Zadeklaruj każdą grubość w css/custom.css, powyżej reguły z kroku 2:

    @font-face {
  font-family: 'BrandFont';
  src: url('../fonts/brandfont.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

  3. Użyj 'BrandFont' w regułach font-family, usuń wiersz Google z biblioteki i wyczyść pamięci podręczne.

Co widzisz

Tekst w każdym elemencie kreatora używa nowej czcionki, w trybie edycji i na opublikowanej stronie. Panel Style każdego elementu nadal ustawia rozmiar i kolor; zobacz zmianę rozmiaru i koloru tekstu.

Przycisk Font family edytora tekstu jest domyślnie wyłączony. Wymienia standardowe bezpieczne czcionki CKEditor, nie twoje, więc trzymaj go wyłączonego, aby redaktorzy pozostali przy marce.

Motyw DXPR

Motyw DXPR ma własne ustawienia czcionek. Przejdź do Appearance, otwórz ustawienia motywu DXPR (/admin/appearance/settings/dxpr_theme) i rozwiń Fonts. Ustawia osobno Base Font, Headings, Navigation, Site Name i Blockquote, więc nie potrzebujesz do nich CSS.

Jeśli nie widzisz czcionki

  • Tekst nadal pokazuje starą czcionkę. Biblioteka nie jest wczytana albo pamięć podręczna trzyma stary CSS. Sprawdź, czy mytheme.info.yml wymienia bibliotekę, potem wyczyść pamięci podręczne w /admin/config/development/performance.
  • Nagłówki albo niektóre pola zachowują inną czcionkę. Reguła motywu dla tego elementu jest bardziej szczegółowa niż body. Zbadaj tekst w przeglądarce i dodaj jego selektor do swojej reguły.
  • Jeden akapit pokazuje inną czcionkę. Redaktor zastosował do niego Font family. Zaznacz tekst i kliknij Remove format, potem odznacz Font family w profilu; zobacz edytor tekstu.

Co dalej?