Jak połączyć czcionki za pomocą pliku CSS
Łączenie plików za pomocą własnego CSS wymaga doświadczenia w pisaniu kodu CSS i własnego serwera do przechowywania pliku.
Pierwszą rzeczą, której potrzebujesz, są pliki czcionek WOFF.
Możesz je uzyskać, kupując czcionkę w serwisie czcionek, np. myfonts.com. Kupując, wybierz licencję "WEB", abyś mógł z niej korzystać online.
Umieszczanie plików czcionek w Internecie
Możesz wybrać dowolny serwer lub usługę CDN do umieszczania plików. Najważniejsze jest to, że serwer musi obsługiwać Access-Control-Allow-Origin CORS do dystrybucji do dowolnej domeny. (Access-Control-Allow-Origin: *)
Możesz je uzyskać, kupując czcionkę w serwisie czcionek, np. myfonts.com. Kupując, wybierz licencję "WEB", abyś mógł z niej korzystać online.
Umieszczanie plików czcionek w Internecie
Możesz wybrać dowolny serwer lub usługę CDN do umieszczania plików. Najważniejsze jest to, że serwer musi obsługiwać Access-Control-Allow-Origin CORS do dystrybucji do dowolnej domeny. (Access-Control-Allow-Origin: *)
Jeśli hostujesz pliki na własnym serwerze
Utwórz plik .htaccess w katalogu głównym witryny i dodaj następujący kod:
Utwórz plik .htaccess w katalogu głównym witryny i dodaj następujący kod:
Zestaw nagłówków Access-Control-Allow-Origin "*" Stwórz własny plik CSS i umieść go na swoim serwerze lub usłudze CDN.
Jak utworzyć plik CSS
Poniżej znajduje się przykład napisania CSS. Możesz go utworzyć w zwykłym edytorze tekstu, zapisać z rozszerzeniem .css, a następnie przesłać na serwer lub CDN.
@font-face {
rodzina czcionek: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
waga czcionki: 400;
styl czcionki: normalny;
}
@font-face {
rodzina czcionek: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
grubość czcionki: 700;
styl czcionki: pogrubiony;
}
rodzina czcionek: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
waga czcionki: 400;
styl czcionki: normalny;
}
@font-face {
rodzina czcionek: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
grubość czcionki: 700;
styl czcionki: pogrubiony;
}
Jak korzystać z CSS
Liczby 300,400... we właściwości font-weight wskaż grubość czcionki. Oto pełna lista:
100 - cienki
200 - dodatkowe światło
300 - lekki
400 - normalny
500 - średni
600 - półpogrubienie
700 - pogrubienie
800 - bardzo odważny
900 - czarny
Przeglądarki w Internecie wyświetlają czcionki nieco inaczej niż na przykład w programie Photoshop. Zwykle wychodzą trochę odważniejsi. Czasami pomocne jest poznanie małych sztuczek: możesz określić na przykład plik o lekkiej wadze, aby uzyskać normalne renderowanie czcionek.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
waga czcionki: 300;
styl czcionki: normalny;
}
I odwrotnie. Jeśli nie masz pliku Semi-bold (600), zamiast tego określ Pogrubienie. W ten sposób półpogrubione nagłówki będą wyświetlane pogrubioną czcionką zamiast zwykłego stylu tekstu podstawowego.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
waga czcionki: 500;
styl czcionki: pogrubiony;
}
Jeśli masz tylko jeden plik czcionki, możesz określić go dla wszystkich stylów, wymieniając je przecinkami: 300 400 500 600 700
100 - cienki
200 - dodatkowe światło
300 - lekki
400 - normalny
500 - średni
600 - półpogrubienie
700 - pogrubienie
800 - bardzo odważny
900 - czarny
Przeglądarki w Internecie wyświetlają czcionki nieco inaczej niż na przykład w programie Photoshop. Zwykle wychodzą trochę odważniejsi. Czasami pomocne jest poznanie małych sztuczek: możesz określić na przykład plik o lekkiej wadze, aby uzyskać normalne renderowanie czcionek.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
waga czcionki: 300;
styl czcionki: normalny;
}
I odwrotnie. Jeśli nie masz pliku Semi-bold (600), zamiast tego określ Pogrubienie. W ten sposób półpogrubione nagłówki będą wyświetlane pogrubioną czcionką zamiast zwykłego stylu tekstu podstawowego.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
waga czcionki: 500;
styl czcionki: pogrubiony;
}
Jeśli masz tylko jeden plik czcionki, możesz określić go dla wszystkich stylów, wymieniając je przecinkami: 300 400 500 600 700
Wróć do Tildy. Ustawienia witryny → czcionki i kolory → własną czcionką. Wklej link do pliku CSS. Dodaj nazwę czcionki określoną w pliku CSS.
Zapisz i ponownie opublikuj wszystkie strony.
Ważne: swoją czcionkę zobaczysz dopiero po opublikowaniu witryny. W trybie edycji lub podglądu nie można podłączyć żadnego zewnętrznego pliku CSS, co oznacza, że Twoja czcionka nie będzie widoczna (jest to robione ze względów bezpieczeństwa).
