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. Przy zakupie należy wybrać licencję "WEB", aby móc korzystać z niej online.
Umieszczanie plików czcionek w sieci
Do umieszczania plików można wybrać dowolny serwer lub usługę CDN. Najważniejsze jest to, że serwer musi obsługiwać Access-Control-Allow-Origin CORS w celu dystrybucji do dowolnej domeny. (Access-Control-Allow-Origin: *)
Możesz je uzyskać, kupując czcionkę w serwisie czcionek, np. myfonts.com. Przy zakupie należy wybrać licencję "WEB", aby móc korzystać z niej online.
Umieszczanie plików czcionek w sieci
Do umieszczania plików można wybrać dowolny serwer lub usługę CDN. Najważniejsze jest to, że serwer musi obsługiwać Access-Control-Allow-Origin CORS w celu 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:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>Utwórz własny plik CSS i umieść go na swoim serwerze lub w usłudze CDN.
Jak utworzyć plik CSS
Poniżej znajduje się przykład zapisu CSS. Można go utworzyć w zwykłym edytorze tekstu, zapisać z rozszerzeniem .css, a następnie przesłać na serwer lub do sieci CDN.
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}
Jak używać CSS
The numbers 300,400... in the font-weight property indicate the weight of the font. Here is the complete list:
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
Wróć do Tilda. Ustawienia strony → Czcionki i kolory → Własna czcionka. Wklej link do pliku CSS. Dodaj nazwę czcionki określoną w pliku CSS.
Zapisz i opublikuj ponownie wszystkie strony.
Ważne: czcionka będzie widoczna dopiero po opublikowaniu strony. W trybie edycji lub podglądu nie można podłączyć żadnego pliku CSS innej firmy, co oznacza, że czcionka nie będzie widoczna (dzieje się tak ze względów bezpieczeństwa).
