Jak dodać czcionki i typy czcionek Squirrel do swojej witryny w 5 łatwych krokach

wiewi├│rka czcionek

Dzi─Öki stronom takim jak Font Squirrel mo┼╝esz u┼╝ywa─ç dowolnego typu lub stylu czcionki, kt├│ry lubisz na stronie internetowej. Opcje by┼éy ograniczone do kilku standardowych czcionek internetowych, z kt├│rych ka┼╝dy musia┼é korzysta─ç. Obecnie dost─Öpnych jest znacznie wi─Öcej opcji. Nie jeste┼Ť ju┼╝ ograniczony do kilku czcionek zgodnych z Internetem. Teraz czcionki mo┼╝na pobiera─ç w locie, po prostu otwieraj─ůc witryn─Ö internetow─ů.

Bardzo popularne s─ů strony internetowe takie jak Font Squirrel, z dost─Öpem do setek i tysi─Öcy pozycji. Jego generator czcionek internetowych sprawia, ┼╝e ÔÇőÔÇőkorzystanie z materia┼é├│w przes┼éanych przez osoby trzecie, a tak┼╝e z wyselekcjonowanych kreacji jest ┼éatwiejsze ni┼╝ kiedykolwiek.

 

Zamiast u┼╝ywa─ç standardowych kroj├│w pisma, takich jak Arial, Calibri i Helvetica Neue, mo┼╝emy u┼╝y─ç regu┼éy CSS @font-face. Dzi─Öki temu mo┼╝emy u┼╝ywa─ç dowolnej czcionki bez konieczno┼Ťci instalowania jej na urz─ůdzeniach odwiedzaj─ůcych. To doskona┼éa opcja, kt├│ra zapewnia swobod─Ö wypowiedzi projektantowi strony internetowej i maksymaln─ů u┼╝yteczno┼Ť─ç dla u┼╝ytkownika.

Czytaj wi─Öcej: Jak nauczy─ç si─Ö CSS (Smashing Magazine)

Dzięki temu niezwykle łatwo jest dodać Font Squirrel i dowolne inne kroje pisma do swojej witryny.

W tym samouczku pokażemy, jak używać Font Squirrel na swojej stronie internetowej. Możesz użyć tej samej koncepcji, aby dodać dowolny krój pisma do swojej witryny, w tym FontAwesome. 

Dodaj Font Squirrel do swojej witryny your

1. Znajd┼║ ┼╝─ůdan─ů czcionk─Ö FontSquirrel

  • Odwiedzi─ç Wiewi├│rka z czcionk─ů i wybierz Znajd┼║, aby wyszuka─ç czcionk─Ö, kt├│r─ů chcesz doda─ç.
  • Wybierz ten, kt├│rego chcesz u┼╝y─ç w swojej witrynie jako cz─Ö┼Ť─ç projektu strony internetowej. Mo┼╝esz u┼╝y─ç r├│┼╝nych kategorii, aby znale┼║─ç kr├│j czcionki, kt├│rego chcesz u┼╝y─ç, znale┼║─ç najpopularniejsze, ostatnio dodane, popularne lub zyskuj─ůce popularno┼Ť─ç dodatki. Do wyboru s─ů tysi─ůce. Wybierz ten, kt├│ry najlepiej pasuje do projektu, nad kt├│rym pracujesz.

 znajdź fontsquirrel fonts

 

2. Pobierz zestaw Font Squirrel WebFont

  • Po wybraniu czcionki, kt├│rej chcesz u┼╝y─ç, kliknij przycisk WebFont Kit w prawym g├│rnym rogu ekranu.
  • Kliknij Pobierz zestaw @font-face.

zestaw czcionek do pobrania fontsquirrel

 

fontsquirrel pobierz zestaw czcionek

┬áPobieranie b─Ödzie zawiera┼éo plik zip z wieloma plikami, w tym sposobem korzystania z czcionki internetowej, wszelkimi licencjami zwi─ůzanymi z tym krojem czcionki Font Squirrel i oczywi┼Ťcie samym plikiem.

 

3. Prze┼Ťlij pliki Font Squirrel na swoj─ů stron─Ö

  • Wyodr─Öbnij plik ÔÇö zostanie rozpakowany do folderu o nazwie wybranego elementu.
  • Prze┼Ťlij WSZYSTKIE pliki do folderu CSS swojej witryny. B─Ödziesz mie─ç kilka plik├│w, kt├│re musisz przes┼éa─ç, w tym:
  1. nazwa-czcionki-webfont.eot,
  2. nazwa-czcionki-webfont.svg,
  3. nazwa-czcionki-webfont.ttf,
  4. fontname-webfont.woff,
  5. arkusz styl├│w.css

 

pliki do przesy┼éania czcionek z wiewi├│rk─ů

 

4. Dodaj kr├│j pisma do arkusza styl├│w CSS

Ostatni krok b─Ödzie si─Ö nieco r├│┼╝ni─ç w zale┼╝no┼Ťci od sposobu u┼╝ycia czcionek w Twojej witrynie. Definicje kroju pisma znajdziesz w pliku CSS. Plik powinien mie─ç nazw─Ö arkusz styl├│w.css. Powiniene┼Ť znale┼║─ç plik CSS u┼╝ywany w Twojej witrynie i doda─ç tam pliki Font Squirrel, korzystaj─ůc z poni┼╝szych wskaz├│wek. Dodaj nast─Öpuj─ůce elementy do pliku stylesheet.css, zast─Öpuj─ůc:

 

@font-face {
    font-family: 'FontName';
    src: url('FontName-webfont..eot');
    src: url('FontName-webfont..eot?#iefix') format('embedded-opentype'),
        url('FontName-webfont.woff') format('woff'),
        url('FontName-webfont.ttf') format('truetype'),
        url('FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Je┼Ťli przes┼éa┼ée┼Ť czcionki do folderu TYPES, kod zmieni si─Ö bardzo nieznacznie na:

@font-face {
    font-family: 'FontName';
    src: url('types/FontName.eot');
    src: url('types/FontName.eot?#iefix') format('embedded-opentype'),
        url('types/FontName-webfont.woff') format('woff'),
        url('types/FontName-webfont.ttf') format('truetype'),
        url('types/FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

5. Zmień deklaracje CSS, aby użyć dodanych elementów FontSquirrel

 

Gdy ju┼╝ dodasz powy┼╝sze deklaracje do arkusza styl├│w, b─Ödziesz musia┼é go nieco bardziej edytowa─ç, aby faktycznie u┼╝ywa─ç kroju pisma. Po dodaniu powy┼╝szego kodu musisz dalej edytowa─ç arkusz styl├│w, aby u┼╝ywa─ç nowych typ├│w, kt├│re doda┼ée┼Ť.

Zr├│b to, zmieniaj─ůc rodzin─Ö czcionek na nazw─Ö wybranej opcji. Na przyk┼éad, je┼Ťli chcesz u┼╝y─ç nowego typu ze swoimi nag┼é├│wkami - znajd┼║ CSS nag┼é├│wka, a nast─Öpnie odpowiednio go zmie┼ä.

 

znajd┼║ obecn─ů rodzin─Ö czcionek

Zaktualizuj deklaracj─Ö CSS o pobran─ů nazw─Ö FontSquirrel.

h1,h2,h3,h4,h5,h6 {
    color: #444;
    text-decoration: none;
    font-family: 'FontName', sans-serif;
}

┬áOczywi┼Ťcie mo┼╝esz u┼╝y─ç rodziny czcionek w dowolnym tagu CSS!

 

Je┼Ťli poprawnie wykona┼ée┼Ť wszystkie powy┼╝sze kroki, po ponownym za┼éadowaniu arkusza styl├│w powiniene┼Ť mie─ç now─ů czcionk─Ö Font Squirrel, kt├│r─ů w┼éa┼Ťnie doda┼ée┼Ť do swojej witryny!

Je┼Ťli nie, po prostu otw├│rz narz─Ödzia programistyczne przegl─ůdarki, aby sprawdzi─ç, czy dost─Öp do wszystkich plik├│w jest prawid┼éowy. Je┼Ťli nie, sprawd┼║ ponownie kod CSS, aby upewni─ç si─Ö, ┼╝e nazwa czcionki jest poprawna.

 

Je┼Ťli szukasz inspiracji do u┼╝ycia czcionki, oto 25 najgor─Ötszych czcionek w Font Squirrel.

Montserrat

1. Montserrat

Montserrat to nowoczesna czcionka miejska dost─Öpna w wielu gramaturach. Dzia┼éa z bliska i na odleg┼éo┼Ť─ç i mo┼╝e dobrze dzia┼éa─ç w sieci.

https://www.fontsquirrel.com/fonts/montserrat

Otwarte Sans

2. Otw├│rz bez

Open Sans nie powinien wymaga─ç przedstawiania. Jest to jedna z najpopularniejszych czcionek na ┼Ťwiecie, przejrzysta, nowoczesna i elastyczna.

https://www.fontsquirrel.com/fonts/open-sans

Roboto

3. Roboto

Roboto to kolejna niezwykle popularna czcionka internetowa dzi─Öki czystym liniom, nieskomplikowanemu wygl─ůdowi i elastyczno┼Ťci.

https://www.fontsquirrel.com/fonts/roboto

Raleway

4. Raleway

Raleway przypomina wygl─ůdem Roboto, ale jest te┼╝ wyj─ůtkowy. Kolejna czysta i lekka czcionka, kt├│ra sprawdzi si─Ö w ka┼╝dej sytuacji.

https://www.fontsquirrel.com/fonts/raleway

Lato

5. Lato

Lato istnieje od prawie 10 lat dzi─Öki swojej skuteczno┼Ťci, nowoczesnemu wygl─ůdowi i ┼Ťwietnemu wywa┼╝eniu.

https://www.fontsquirrel.com/fonts/lato

Bebas Neue

6. Bebas Neue

Bebas Neue to interpretacja oryginalnej darmowej czcionki Bebas Neue autorstwa Ryoichi Tsunekawy. To bardzo atrakcyjna czcionka, kt├│ra jest niezwykle popularna.

https://www.fontsquirrel.com/fonts/bebas-neue

Poppiny

7. Poppiny

Poppins to lekka i beztroska czcionka o doskona┼éej r├│wnowadze. Jest te┼╝ na wskro┼Ť nowoczesny, co oznacza, ┼╝e ÔÇőÔÇőmo┼╝e dzia┼éa─ç w wielu projektach.

https://www.fontsquirrel.com/fonts/poppins

wielkie Vibes

8. Świetne wibracje

Great Vibes to płynna czcionka w stylu pisma ręcznego, która jest nadal czytelna na różnych rozmiarach ekranu. To dobrze nadaje się do wykorzystania w ekskluzywnych projektach.

https://www.fontsquirrel.com/fonts/great-vibes

P─Ödzel Alex

9. P─Ödzel Alex

Alex Brush to kolejny p┼éynny, odr─Öczny skrypt p─Ödzla, kt├│ry jest czytelny na r├│┼╝nych rozmiarach ekranu. Jest to bardziej zrelaksowane podej┼Ťcie do tematu z wyra┼║nym urokiem.

https://www.fontsquirrel.com/fonts/alex-brush

Ruchome piaski

10. Ruchome piaski

Ruchome Piaski s─ů lekkie i kapry┼Ťne, a tak┼╝e przewiewne. Mieszanka nowoczesno┼Ťci i kapry┼Ťno┼Ťci, czcionka mo┼╝e by─ç idealna w wielu projektach internetowych.

https://www.fontsquirrel.com/fonts/quicksand

Oswald

11. Oswald

Oswald to ci─Ö┼╝sza, bardziej wyrazista czcionka, kt├│ra ma ┼Ťwietn─ů czytelno┼Ť─ç z r├│┼╝nych odleg┼éo┼Ťci. Jest r├│wnie┼╝ nieskomplikowany i nowoczesny, co dobrze si─Ö sprawdza.

https://www.fontsquirrel.com/fonts/oswald

Źródło Sans Pro

12. Źródło Bez Pro

Source Sans Pro to ewolucja jednej z pierwszych czcionek open source firmy Adobe. Został on stale modyfikowany i ulepszany, co jest jednym z najlepszych przykładów.

https://www.fontsquirrel.com/fonts/source-sans-pro

Wy┼Ťwietlacz Playfair

13. Wy┼Ťwietlacz Playfair

Playfair Display to bardziej tradycyjna czcionka z nowoczesnymi akcentami. Jest dobrze wyważony i może działać w różnych sytuacjach.

https://www.fontsquirrel.com/fonts/playfair-display

Nap├│j mleczny

14. Koktajl mleczny

Milkshake to ci─Ö┼╝sza czcionka z ameryka┼äskim motywem. Pocz─ůtkowo naszkicowano go p─Ödzlem, zanim zamieniono go w czcionk─Ö.

https://www.fontsquirrel.com/fonts/milkshake

Skrypt Kaushan

15. Skrypt Kaushana

Kaushan Script zawiera azjatycki element, który przywołuje wizje Sajgonu z lat 1930. XX wieku. To ładna czcionka o szerokim apelu.

https://www.fontsquirrel.com/fonts/kaushan-script

Kawa┼éek pi─ůty

16. Kawa┼éek pi─ůty

Chunkfive to opisowa nazwa tej grubej czcionki. Jest to pogrubiona czcionka, która robi wrażenie i może dobrze sprawdzać się w nagłówkach lub nagłówkach.

https://www.fontsquirrel.com/fonts/chunkfive

Amatic

17. Amatyczny

Amatic przypomina pisanie na tablicy lub The Simpsons, ale ma swój własny charakter. Może działać dobrze less formalne strony internetowe.

https://www.fontsquirrel.com/fonts/amatic

Allura

18. Allura

Allura to kolejna płynna czcionka odręczna, która jest bardzo przyjemna dla oka. Dokładne rozważenie może dobrze wykorzystać tę czcionkę.

https://www.fontsquirrel.com/fonts/allura

Liga Spartańska

19. Liga Spartan

League Spartan to bezsensowna czcionka, kt├│ra ma du┼╝o obecno┼Ťci. Mo┼╝e idealnie sprawdza─ç si─Ö jako nag┼é├│wek lub wezwanie do dzia┼éania.

https://www.fontsquirrel.com/fonts/league-spartan

Metropolia

20. Metropolia

Metropolis to nowoczesna czcionka geometryczna, na kt├│r─ů wyra┼║nie wp┼éyn─Ö┼éy niekt├│re z bardziej popularnych czcionek. To ┼Ťwietna interpretacja.

https://www.fontsquirrel.com/fonts/metropolis

Pacyfik

21. Pacyfik

Pacifico to lekka, p┼éynna czcionka, kt├│ra przywo┼éuje na my┼Ťl d┼╝insy Pepe i Ameryk─Ö z lat 1960. XX wieku. To efektowna czcionka w tradycyjnym otoczeniu.

https://www.fontsquirrel.com/fonts/pacifico

Aller

22. Aller

Aller to czysty, lekki i nowoczesny design, kt├│rego angular wygl─ůd nadaje si─Ö dobrze do nowoczesnego projektowania stron internetowych.

https://www.fontsquirrel.com/fonts/Aller

Josefin Sans

23. Josefin Sans

Josefin Sans potrafi ┼é─ůczy─ç nowoczesno┼Ť─ç z dziedzictwem i mo┼╝e by─ç bardzo elastyczn─ů czcionk─ů w szerokiej gamie wzor├│w.

https://www.fontsquirrel.com/fonts/josefin-sans

Black Jack

24. Czarny Jack

Black Jack to p┼éynna czcionka o nieformalnym wygl─ůdzie. Mo┼╝e dobrze dzia┼éa─ç w lu┼║nych, komediowych lub zrelaksowanych projektach.

https://www.fontsquirrel.com/fonts/blackjack

Homar

25. Homar

Homar ma wygl─ůd marki, by─ç mo┼╝e Nowej Anglii lub gdzie┼Ť nad morzem. ┼Üwietna czcionka do u┼╝ycia, je┼Ťli projekt pasuje.

https://www.fontsquirrel.com/fonts/Lobster

Cz─Östo zadawane pytania

Co to jest wiewi├│rka czcionki?

Font Squirrel to repozytorium czcionek internetowych pochodz─ůcych od tw├│rc├│w bezp┼éatnych i open source. Wszystkie czcionki mo┼╝na pobra─ç i u┼╝ywa─ç za darmo, nawet komercyjnie.

Jak pobra─ç czcionki internetowe z Font Squirrel?

Pobieranie czcionek internetowych z Font Squirrel jest ┼éatwe. Zidentyfikuj czcionk─Ö, kt├│rej chcesz u┼╝y─ç, pobierz plik zawieraj─ůcy czcionk─Ö. Prze┼Ťlij pliki do swojego us┼éugodawcy hostingowego i do┼é─ůcz nazw─Ö czcionki do pliku stylesheet.css. Nast─Öpnie sprawd┼║, czy czcionka si─Ö ┼éaduje.

Najpopularniejsz─ů obecnie czcionk─ů jest Helvetica. Wed┼éug Wired, Helvetica jest najpopularniejsz─ů czcionk─ů na ┼Ťwiecie, mimo ┼╝e ma 62 lata.

Jaka jest najmodniejsza czcionka?

Oprócz Helvetica najmodniejsze czcionki do użycia według Lifehack to Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni i Didot.

 

 

O autorze
David Attard
Autor: David AttardStrona internetowa: https://www.linkedin.com/in/dattard/
David pracuje w bran┼╝y online / cyfrowej lub w jej pobli┼╝u od 18 lat. Ma ogromne do┼Ťwiadczenie w bran┼╝y oprogramowania i projektowania stron internetowych przy u┼╝yciu WordPress, Joomla i otaczaj─ůcych je nisz. Jako konsultant ds. Cyfrowych koncentruje si─Ö na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej za pomoc─ů po┼é─ůczenia ich strony internetowej i dost─Öpnych obecnie platform cyfrowych.

Jeszcze jedna rzecz... Czy wiesz, ┼╝e osoby, kt├│re udost─Öpniaj─ů przydatne rzeczy, takie jak ten post, r├│wnie┼╝ wygl─ůdaj─ů NIESAMOWITE? ;-)
Prosz─Ö zostaw u┼╝yteczny skomentuj swoje przemy┼Ťlenia, a nast─Öpnie udost─Öpnij to na swoich grupach na Facebooku, kt├│re uznaj─ů to za przydatne i wsp├│lnie zbierzmy korzy┼Ťci. Dzi─Ökuj─Ö za udost─Öpnienie i bycie mi┼éym!

Ujawnienie: Ta strona mo┼╝e zawiera─ç linki do zewn─Ötrznych witryn produkt├│w, kt├│re kochamy i gor─ůco polecamy. Je┼Ťli kupisz sugerowane przez nas produkty, mo┼╝emy otrzyma─ç op┼éat─Ö za polecenie. Takie op┼éaty nie wp┼éywaj─ů na nasze rekomendacje i nie przyjmujemy p┼éatno┼Ťci za pozytywne recenzje.

Autorzy promowani w:  Inc Czasopismo Logo .   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   i wiele więcej ...