Niestandardowe czcionki na stronach www

Co zrobić, jeśli chcesz aby napisy na twojej stronie www miały ciekawą, niestandardową czcionkę? Jeszcze do niedawna było to raczej nie wskazane. Jeśli komputer odwiedzającego twojego bloga, nie miał zainstalowanej tej właśnie czcionki, wyświetlała się standardowa, np. arial. I nie było spodziewanego, ładnego efektu.

Obecnie istnieje kilka łatwych sposobów ozdobienia strony ładną czcionką.

Google Fonts

Najłatwiejszy chyba sposób na wstawienie niestandardowej czcionki to google fonts, który oferuje kilkaset róznych czcionek. Jeśli wybierzesz interesującą cię czcionkę, kliknij Quick Use gdzie będzie dokładna instrukcja jak użyć danej czcionki.

Odwołanie do czcionki wklejasz do sekcji <head></head> np.

<link href=’http://fonts.googleapis.com/css?family=Pathway+Gothic+One’ rel=’stylesheet’ type=’text/css’>

Można również zaimportować czcionkę do pliku css lub wstawić w postaci javascriptu.

Następnie zwyczajnie korzysta się z czcionki w css:

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

@font-face

Wpisujemy do arkusza stylów podając url plików z czcionkami. Czcionki są w róznych formatach (.eot, .otf, .ttf, woff), gdyż rózne przeglądarki obsługują rózne formaty czcionek. Każdy format jest w innym pliku i musisz podać url każego z tych plików.  Najpierw trzeba podać adres pliku .eot. Szczegółowy artykuł na ten temat jest tu.

@font-face {
font-family: Anagram;
src: url(‘anagram.ttf’);
}
h1 {
font-family: Anagram, Tahoma, Verdana, sans-serif;
}

Skąd wziąć pliki niestandardowych czcionek? Można je kupić oczywiście i wtedy otrzymasz wszystkie pliki. Można również skorzystać z generatora font-face.  Jeśli zależy ci aby znaleźć czcionki darmowe, można je znależć na Font Squirrel. Ale upewnij się, że na pewno dana czcionka jest darmowa i przeczytaj jej licencję.

więcej o niestandardowych fontach >>>

 

 

 

Google oferuje też ciekawe efekty wizualne dla fontów, np. płonący font, cień itp.

5 Comments
  1. Stosowanie różnych czcionek może wpływać na estetykę tekstu. Jeśli teksty są długie to trzeba jakoś wyróżnić chociażby poszczególne akapity.

  2. Trzeba pamiętać, aby niestandardowa czcionka na stronie się wyświetlała, musi być zainstalowana na komputerze czytelnika. Dobrym rozwiązaniem są cufony, czyli czcionki realizowane w oparciu JavaScript, wtedy nie ma wygania obecności fontu w komputerze użytkownika.

    1. Albo google fonts gdzie wystarczy tylko wkleić link na stronie www
      albo font-face gdzie można wstawić font na stronę www np. pobrany z fontsquirrel

  3. z google font jest taki problem, że niektóre mają bardzo dziwne polskie znaki (ogonki) wyglądające na stronie bardzo brzydko (np DROID czy Roboto Condensed)

Pozostaw odpowiedź Małgorzata Anuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.