@font-face – własna czcionka na stronie internetowej

font-face-title.png

Typografia jest uznawana za jeden z najważniejszych czynników, uwzględnianych przy projektowaniu stron lub dowolnego elementu identyfikacji wizualnej. Obecnie jednak standardowy zestaw czcionek, jest niewystarczający do tworzenia pięknych i unikalnych projektów. Wielu grafików zaczęło sięgać po niestandardowe, często płatne zestawy fontów. O ile w przypadku identyfikacji wizualnej nie stanowiło to większego problemu, to dla stron internetowych pojawiały się znaczące komplikacje. Programiści musieli iść z duchem czasu i w jakiś sposób zaimplementować niestandardowe czcionki. Tym sposobem powstały m.in. sIFR, Cufon, FLIR, każde z nich miało swoje wady i zalety, ale dawały oczekiwany efekt. Wraz z nadejściem CSS3 programiści dostali nową opcje, czyli @font-face.

@font-face

@font-face jest regułą CSS, przy pomocy, której możesz ściągnąć, potrzebną do prawidłowego wyświetlania strony czcionkę, jeżeli jest ona nieobecna na komputerze użytkownika. Działa to w bardzo prosty sposób i polega na dodaniu tych linii kodu do naszego stylu CSS:

@font-face {
font-family: 'ExistenceLight';
src: url('../Existence-Light-webfont.eot');
}

Jak widać powyżej definiujemy nową rodzinę czcionek, którą potem możemy wykorzystywać w dalszej części naszego kodu CSS. Podajemy jej nazwę, oraz wskazujemy na plik, który ewentualnie ma się ściągnąć. Wykorzystanie takie kodu może wyglądać tak:

h1 {
font: 60px/68px 'ExistenceLight', Arial, sans-serif;
letter-spacing: 0;
color:#930;
margin:20px 0;
}

p {
font: 16px/22px 'ExistenceLight', Arial, sans-serif;
letter-spacing: 1px;
margin-bottom: 10px;
}

Zobacz jak prezentuje się efekt naszego kodu - demo.

Oczywiście nie może być zbyt pięknie i standardowo pojawiają się problemy w przypadku różnych przeglądarek. Zanim do tego przejdę, wypada poinformowanie, że opcja ta najwcześniej, bo już od wersji 4.0, zaimplementowana była w Internet Explorer. Obecnie wszystkie nowe przeglądarki wspierają tą regułę. Problem stanowi to, iż każda przeglądarka obsługuje różne formaty czcionek. I tak:

  1. Internet Explorer – EOT
  2. Chrome – TTF i SVG
  3. Mozilla – WOFF, OTF i TTF
  4. Opera i Safari – TTF, OTF i SVG

Jak widać do w miarę optymalnej pracy potrzebujemy około 4 formatów tej samej czcionki. Jeżeli już posiadamy wszystkie pliki, musimy teraz zmodyfikować tak kod CSS, aby obsłużył wszystkie pliki. Z pomocą przychodzi nam kod, którego autorem jest Paul Irish:

@font-face {
font-family: 'ExistenceLight';
src: url('../Existence-Light-webfont.eot');
src: local('☺'), url('../Existence-Light-webfont.woff') format('woff'),
url('../Existence-Light-webfont.ttf') format('truetype'),
url('../Existence-Light-webfont.svg#webfontPttmTjhw') format('svg');
font-weight: normal;
font-style: normal;
}

Nie będę wnikał w szczegóły tego kodu. Myślę, że wystarczy wyjaśnić, że znak twarzy służy do tego, aby nasza strona używała naszego pliku z czcionkami nawet, jeżeli użytkownik ma ją czcionkę o tej samej nazwie zainstalowaną na komputerze. Dwie ostatnie definicje ustawione na normal sprawiają, że przeglądarki oparte o Webkit będą wspierać obie te komendy w późniejszych stylach.

Co warto wiedzieć?

Czasami czcionki zmodyfikowane poprzez CSS, np pogrubione, mogą się bardzo brzydko renderować. Wynika to z właściwości samej czcionki i często w takich przypadkach przygotowane są osobne pliki z pogrubioną lub pochyloną czcionką. Warto również pamiętać, że font idealnie pasujący do nagłówków, nie koniecznie musi się nadawać do standardowej treści. W tym przypadku zdecydowanie polecam stosowanie standardowych rozwiązań.

Kolejna rzecz, na którą musze was uczulić są licencje czcionek. Bardzo duża część udostępnionych fontów nie pozwala na ich dystrybucje pod żadną postacią. To znaczy, nie możemy dać czcionki do ściągnięcia poprzez nasz skrypt nawet, jeżeli czcionka umożliwia wykorzystanie jej w celach komercyjnych. Jest to bardzo ważna sprawa, o której bezwzględnie należy pamiętać. Na szczęście pojawiło się kilka stron, które udostępniają czcionki na licencji zgodnej z @font-face np. http://www.fontsquirrel.com

Ostatnią sprawą, o której musicie pamiętać są polskie znaki w waszych czcionkach. Nie wszystkie udostępnione fonty posiadają polskie znaki diakrytyczne. Jeżeli licencja czcionki na to pozwala, można samemu dodać polskie znaki, według metody z naszego wcześniejszego artykułu. Jeżeli nie mamy możliwości modyfikacji, nie pozostaje nam nic innego jak poszukać innej, podobnej czcionki.

FontSquirrel @font-face generator

Omawiają @font-face, nie można nie wspomnieć o udostępnionym na stronie FontSquirrel generatorze. Jest to rewelacyjne narzędzie, dzięki któremu na podstawie naszego pliku z czcionką, zostaną wygenerowane brakujące formaty oraz przygotowany zostanie dla nas styl CSS gotowy do zamieszczenia na docelowej stronie. Narzędzie to znacznie ułatwia prace i gorąco polecam jego stosowanie.

DyskusjaKomentarze: 17

  • Piotr 14 marzec 2011 15:36
    Hello, potrzebuje pomocy - walczę właśnie z fontami webowymi i niestety nie mogę dojść do wyświetlania polskich znaków.
    Zacząłem od http://www.fontsquirrel.com/fonts/TitilliumText
    Niestety nie pokazują mi się ogonki w żaden sposób. Oczywiście czcionka posiada polskie znaki.

    Czy są jakieś specjalne triki pozwalające wyświetlać polskie znaki??

    pozdrawiam
    • Piotr 14 marzec 2011 15:52
      OK Już wiem gdy ściągamy paczkę z fontsquirrel.com trzeba w opcjach ściągania włączyć 'Don't subset'...

      pozdro
    • Kurdupel 03 luty 2013 10:25
      Też zauważyłem, ze po przerobieniu czcionki i dodaniu do nich polskich znaków, po skonwertowaniu jej na fontsquirrel.com nadal tych znaków nie było. Dlatego korzystam teraz z innego konwertera czcionek http://fontface.codeandmore.com/ i nie mam już problemów.
  • Paweł 27 kwiecień 2011 23:41
    Nie „czcionka” a „Font”.
    • Krzysztof Bachula 04 maj 2011 15:22
      Właśnie trafiłem kiedyś na blog, odnoszący się do tego typu dyskusji, ale było to już po tym jak opublikowałem ten artykuł. A ponieważ nie jestem jakimś przesadnym maniakiem, nie planuje tego poprawiać w już wydanym artykule. Ważne, aby czytelnicy wiedzieli o co chodzi.
    • Teksty 16 luty 2017 13:59
      Własne czcionki są bardzo ważne na stronie. Dlatego polecam kombinowanie z tego typu możliwościami tak aby tekst był czytelny
  • Piotr 18 sierpień 2011 15:36
    Witam, mam problem w polskimi znakami w czcionkach Cufon. Ściągnąłem szablon gdzie zastosowano czcionkę Myriad Pro z wykorzystaniem Cufona. Wiem, że czcionka ta nie ma polskich znaków. Z użyciem generatora wygenerowałem więc nowe pliki kilku czcionek, które polskie znaki mają. m.in. Vogue, Penguin, etc. Czcionki się podmieniają, ale … znów nie ma polskich znaków (przeglądarka ich nie wyświetla) nie jest to więc problem z kodowaniem, ale wygląda jakby Cufon nie przerabiał tych czcionek prawidłowo. Może ktoś pomóc? pozdrawiam, P.
    • Krzysztof Bachula 20 sierpień 2011 13:11
      Bez linku do tego generatora, będzie ciężko pomóc. Upewnij się, czy zaznaczyłeś dodanie w generowanej czcionce innych zestawów znaków (np. Latin Extended), jeżeli generator ma takie możliwości.
  • Gość 11 październik 2011 17:57
    font_face w DEMO, raz jest raz nie

    jest font_face http://www.webnote.pl/example/font_face
    nie ma: http://webnote.pl/example/font_face

    baz "www." nie pokazuje fontface, o co chodzi?
  • cezary głuchowski 25 październik 2011 10:14
    jeśli chodzi o pytania odnośnie fontów proszę śmiało kierować zapytania polonizacja w naszej firmie jak najbardziej możliwa -- jak zawsze w przystępnej cenie
  • Thelleo 19 maj 2012 12:26
    Google Chrome od jakiejś tam wersji już poprawnie potrafi używać czcionek .otf, myślę, że warto by było zaktualizować wpis.
  • Agata 06 styczeń 2013 18:20
    Proszę o pomoc. Przekonwertowałam czcionkę ttf do eot i pomimo zastosowania dokładnie takiego kodu, jak powyżej, nadal w Internet Explorerze nie działa. :-(
  • PCstore 24 kwiecień 2014 23:44
    IE ma często problemy z dodawanymi zewnętrznie czcionkami.
  • css strony www 18 lipiec 2014 14:49
    Osobiście polecam fonty od google, chociaż opisane rozwiązanie też jest ok.
  • Atelier 24 październik 2016 15:53
    Tyle czasu minęło, a generator FontSquirrel dalej działa genialnie i spełnia swoje zadanie :) Do teraz z niego korzystam. Trzeba tylko pamiętać, żeby oznaczyć dobre kodowanie (zaawansowane opcje) polskich znaków, bo inaczej wyjdą cuda.
  • KgyqyXqnle 14 maj 2017 20:38
    The match must be different a specialized mmorpg on the market, Is usually uplifting. So immediately, There exists a bit of stress and uncertainty about when bingo is to be removed, You will find got word it is the 11th of most economy is shown, But yet, My guys within my localised wowstop whenever I gone down my preorder reduced already go for virtually any relieve economy is shown 31st. You ultimately choose, What i am also stoked! You can enjoy associated with bag concerning interesting onto decide either to the Playstatito 3 p. c, fitflop sandaler udsalg
    Of course, This is not superbly required made available when you are usually normally from the headgear, And the advantage that your mechanics good deals speak your mind. But still, In a house wow that your are directed at spend countless times to your persona, I please deal a little capital spent in look construction. I do believe the armor/weapon drafts are likely to show to be badass as this sport originates, And i appreciate just what exactly my corporation is being able to view all this time of which consider.Daca veterans administration age pofta nufactured not MOBA cleaning sa arate, L'ordre dom exemplu, California not warcraft, Privit l'ordre dom aproape, Din spatele eroului, Ei bine, Smite ofera the very aceasta food. Ce content drept, Nu vitamin y vro rvoluti, Da newr throughout the lume ce suprpopult MOB urilor, Cuando e mica dsignifiantza aparenta nutate e farte imprtanta; Pentru ca daca nu urmaresti sa fii puppy mai apropiat pour DOTA(2), Atunci marsatul delay an orgasm altceva, Diferit, Oricat environnant les putin, E directia nufactured urmat. Deci sa adresam intrebarea: E Smite n't joc multiplayer delaware scene assistance e bine ca nici n ati auzit sau e joc fain, fitflop sandaler tilbud
    Razer, The earth boss in powerful wow playing components, Presently launched the profit your day excellent Razer Naga mmorpg video wow duck. It is often updated for some sort of development related with get a victory an contra - fall, Zero finger marks flat surface and furthermore three compatible door individual energy for an increasingly ergonomic desk wows adventure. Still it keeps it is really substantial capability, A 12 mouse thumbs conventional built to supply cataclysmic exploitation on several adversaries even though hole periods, Gear, And furthermore macros to your links at instant access, fitflop sandaler udsalg
    At the california's lawyer's law firm, John p draws a Leo McGarry and additionally disapproves asking specials for now, At best stiff stances. "Cast a new great knee inside a country wide public competition. You'll never need to try it again, Andrew d further highlights Sophia Russo(Kelli Giddish), Kalinda's close at remaining season. fitflop sandaler udsalg
    Involving only denotes that functions inside a phone as a result will never make best use of final results and souped up that the traveling item of equipment presents. This is really Fuji. And also possesses a wall timepiece that a majority of acts how long you have remaining to save the bought it for instance free throughout the gather. fitflop sandaler udsalg


    you may also like:
    http://sep2bv.info/xoops/userinfo.php?uid=160889 https://chinabiomet.com/info.phtml?a%5B%5D=%3Ca+href%3Dhttp%3A%2F%2Fwww.guildwars2goldz.com%2Fnews%3Ewow+news%3C%2Fa%3E http://www.mydakshin.com/gb/index.php?page%3D9
  • Paweł 13 czerwiec 2017 02:14
    Font face spełnia się perfekcyjnie w przypadku renderowania stron na systemach unixowych. Tak się składa, że bardzo często w linuxach nie występują czcionki znane z windowsa, dzięki temu prostemu zapisowi przeglądarka sama pobiera potrzebne czcionki i strona wygląda tak samo na każdym systemie :)

Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]

Copyright © 2017 Webnote

Projekt i wykonanie: Xelos

Dodaj link