Jak dodać własną czcionkę do szablonu faktury?

Własna czcionka w szablonie faktury to sposób na dopasowanie wyglądu dokumentów do identyfikacji wizualnej Twojej firmy. Opcja tworzenia własnego szablonu faktury z własną czcionką jest dostępna od planu Standard i działa dla wszystkich typów dokumentów. Możesz użyć czcionki z własnego serwera lub pobrać ją bezpośrednio z Google Fonts.

Aby skorzystać z własnej czcionki należy utwórz własny szablon. W tym celu przejdź do zakładki Ustawienia > Ustawienia konta > Szablony i w sekcji Własny szablon wydruku faktury kliknij Dodaj nowy szablon i wybierz szablon bazowy, który zmodyfikujesz o własną czcionkę.

Metoda 1: własny plik czcionki (@font-face)

Użyj tej metody, jeśli masz pliki czcionki (np. .woff, .ttf) hostowane na własnym serwerze.

1. Przejdź do Ustawienia > Ustawienia konta > Szablony. 
2. Skorzystaj z przycisku Dodaj nowy szablon i utwórz nowy szablon. 
3. W polu CSS szablonu wklej poniższy blok jako pierwszą regułę, przed innymi stylami.
4. Zastąp NAZWA-CZCIONKI wybraną nazwą oraz SCIEZKA-DO-PLIKU-CZCIONKI adresem URL pliku czcionki na Twoim serwerze.
5. Zapisz szablon i sprawdź podgląd faktury.

@font-face {
font-family: 'NAZWA-CZCIONKI';
src: url('SCIEZKA-DO-PLIKU-CZCIONKI.eot');
src: url('SCIEZKA-DO-PLIKU-CZCIONKI.eot') format('embedded-opentype'),
     url('SCIEZKA-DO-PLIKU-CZCIONKI.woff') format('woff'),
     url('SCIEZKA-DO-PLIKU-CZCIONKI.ttf') format('truetype'),
     url('SCIEZKA-DO-PLIKU-CZCIONKI.svg') format('svg');
font-weight: normal;
font-style: normal;
}

/* Selektor * stosuje czcionkę do wszystkich elementów szablonu */
* {
  font-family: 'NAZWA-CZCIONKI';
}

Informacje jak przypisać nowy szablon do konkretnego dokumentu znajdziesz w artykule szablon wydruku - weryfikacja i zmiana z poziomu dokumentu.

Metoda 2: czcionka z Google Fonts (@import)

1. Przejdź do Google Fonts i znajdź wybraną czcionkę.
2. Skopiuj adres URL czcionki udostępniony przez Google Fonts.
3. Przejdź do Ustawienia > Ustawienia konta > Szablony i otwórz swój szablon.
4. Wklej linię @import jako pierwszą linię w polu CSS szablonu, przed wszystkimi innymi regułami.
5. Poniżej dodaj regułę * z nazwą czcionki.
6. Zapisz szablon i sprawdź podgląd faktury.

Przykładowy import czcionki Lato wygląda następująco:

@import url('https://fonts.googleapis.com/css?family=Lato');

/* Selektor * stosuje czcionkę do wszystkich elementów szablonu */
* {
  font-family: 'Lato';
}

Możesz też dodać czcionkę przez znacznik HTML umieszczony w szablonie:

<link href="//fonts.googleapis.com/css?family=NAZWA-CZCIONKI:400,700" rel="stylesheet" type="text/css" />

Czcionki z własnego serwera a CORS

Jeśli czcionki hostujesz na własnym serwerze, musisz włączyć obsługę CORS (Cross-Origin Resource Sharing – mechanizm pozwalający przeglądarce pobierać zasoby z innej domeny). Bez tej konfiguracji czcionka może się nie załadować.

Więcej informacji znajdziesz w dokumentacji: konfiguracja CORS na serwerze (enable-cors.org) oraz opis mechanizmu CORS (Wikipedia).

Przykładowa konfiguracja CORS dla AWS S3:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
  <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>GET</AllowedMethod>
  <MaxAgeSeconds>3000</MaxAgeSeconds>
  <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>