Jak zainstalować Google czcionką na SITE

centrum pomocy

POŁĄCZENIE Google FONT CSS

Czcionki odgrywają ogromną rolę w projektowaniu witryny. Jeden i ten sam tekst napisany w różnych czcionek może produkować za osobę przeciwnej wrażenie.

Zobacz na własne oczy:

różne czcionki

Niektóre czcionki wyglądają bardziej przekonujące, inne - bardziej intrygujące.

Ale jak połączyć wszystkie czcionki na stronie i wykorzystać je gdzie chcesz?

W tym artykule pokaże 3 sposoby , w których można podłączyć dowolne i różnorodne niestandardowych czcionek na swojej stronie internetowej. I bez względu na to, w jaki sposób korzystać z CMS: WordPress, Joomla, Drupal lub Otwórz koszyka.

premia Exclusive: Kliknij tutaj , aby krok po kroku wideo (czcionki do podłączenia do serwisu , kliknij aby pobrać ).

widać, że nie jest niczym trudnym do łączenia się z czcionką miejscu.

Dowiesz się:

  • Jak zainstalować wszystkie czcionki na 2 minuty (WordPress) >>
  • Jak połączyć darmowe czcionki z Google Fonts >> usługi
  • Jak elastycznie łączyć czcionki za pomocą CSS >>
  • Gdzie można skorzystać z bezpłatnego czcionek internetowych na stronie >>
  • Funkcje czcionki połączyć się z innym CMS >>

Jeśli masz stronę na Wordress, przeczytaj metoda №1, on - najprostszy. Jeśli jesteś dobry w CSS - można przejść bezpośrednio do drugiej lub trzeciej metody.

Metoda №1. Szybko połączyć się z witryną na czcionki WordPress (Complexity: ⭐ ⭐ ⭐)

Jeśli witryna jest ustawiony premii temat projektu - można połączyć czcionek przez 2 minuty.

Na przykład:

Chcesz zmienić czcionkę tytuły swoich artykułów. Aby to zrobić:

1. W panelu administratora, przejdź do Opcje tematu. Zależnie od szablonu, sekcja ta może być wywołana trochę inaczej, ale sens jest zawsze taka sama - „Ustawienia tematyczne”.

2. Przejdź do Typografia (prasy drukarskiej).

Czytaj więcej:   konwerter MP3 YOUTUBE

3. Wybierz element, który chcesz zmienić czcionkę (nagłówki, akapity):

Czcionki podłączenie do WordPressa

4. Kliknij na „Zapisz zmiany”.

Jeśli witryna jest zasilany przez innego silnika, albo twój projekt motyw nie przewiduje takich ustawień, przejdź do następnej metody.

Sposób №2. Wykorzystać moc czcionek Google
(Złożoność: ⭐ ⭐ ⭐ ⭐)

Czy kiedykolwiek słyszałeś o czcionkach Google? W skrócie - jest to usługa dzięki której można podłączyć więcej niż 700 czcionek na swojej stronie.

Krok 1. Przejdź do oficjalnej stronie serwisu.

Krok 2. Znajdź kolekcję czcionek jedynek Google, które pasuje. W menu po prawej, aby zawęzić zakres ustawiania języka, krój czcionki i popularność:

filtrujące czcionki czcionki google

Aby usługa pokazał czcionki ze wsparciem dla języka rosyjskiego w sekcji Języki wybrać cyrylicy.

Krok 3. Wyobraź podoba Ci czcionkę Roboto. Kliknij na ikonę „+”:

Można dodać dowolną czcionkę, klikając na ikonę „+”.

Krok 4. Po tym, trzeba wdrożyć kosz wybranych czcionek:

Dostosuj klikając kartę, można wybrać styl i język. Jeśli chodzi o skrypty, radzę wybrać standardowy zestaw - normalna (400), pochylony (kursywa, pogrubienie) 400 (700), i rekurencyjnie tłuszczu (700 Bold):

wybór kroju czcionki w google

Ale jeśli trzeba tylko pogrubioną czcionką (tytuły), tylko go wybrać.

Pamiętaj, że im więcej się wybierać kroje, tym większy ciężar załadowanego pliku.

Aby nie spowolnić prędkość pobierania, wybierz najmniejszy możliwych krojów czcionek.

Krok 5: Wróć do profilu i wybierz HTML Vlatko @import. Następnie skopiuj kod zawierający ciąg «@import» i włóż pierwszy wiersz pliku CSS swojej stronie:

Kod do wstawki-in-the CSS

Jeśli masz stronę internetową, na WordPress, plik CSS może znaleźć tutaj: wp_content / themes / „vashatema” / css / ... W folderze CSS prawdopodobne pliku czcionek, w którym chcesz się poruszać i wklej kod z Google:

Kod w pliku css

To nie ma znaczenia, na jakiej działa CMS witryny, wystarczy wkleić kod i będzie 👌

Od pierwszej potrzeby ładowania czcionek, a dopiero potem cała reszta - umieścić kod parowania czcionki na samym początku pliku CSS.

Definiowanie czcionki dla poszczególnych elementów serwisu można w tym samym pliku CSS.

Czytaj więcej:   Jak połączyć grupę zabezpieczeń

Na przykład:

Aby czcionkę Roboto wszystkie akapity, że piszę następujący: p {font-family: ROBOTO;}

Metoda №3. Niestandardowe czcionki połączeń za pomocą CSS (Złożoność: ⭐ ⭐ ⭐ ⭐ ⭐)

Jeśli jesteś wystarczająco wykwalifikowani, to najlepiej, aby połączyć swoje własne czcionki za pomocą CSS. W tym przypadku, fonty będą przechowywane na serwerze w specjalnym folderze. Ale po pierwsze, muszą być gdzieś dostać.

Gdzie mogę dostać czcionek internetowych na swojej stronie

Czy wiesz, że w celu używania czcionek internetowych kupić licencję septsialnuyu?

Lub ...

Podłączyć czcionek z wolnej licencji. Najprostszym sposobem, aby znaleźć je z serwisu Fontsquirrel że robimy.

Krok 1. Przejdź do oficjalnej stronie serwisu

Krok 2. W prawej części menu Języki, wybierz cyrylicy.

Krok 3: Znajdź odpowiednią czcionkę. Zwróć uwagę na liczbę tracings.

Na przykład, jeśli jest znak 4, zostanie on napisany 4 style:

font-wybór-fontsquirrel

Symbol styl czcionki - normalny (400 / regularny), kursywa (italic), pogrubienie (700 / bold), kursywa pogrubienie (700 kursywa).

Krok 5. Kliknij na nazwę czcionki i przejdź do strony ustawień.

Krok 6: Przejdź do sekcji Webfont Kit. Zaznacz wszystkie formaty czcionek, i kliknij Pobierz KIT @ font-face. Jeśli istnieją tylko 1-2 formatu, nie straszny.

Aby połączyć się przy użyciu czcionek @ font-face

Poprzez dyrektywa @ font-face, można podłączyć jeden lub kilka czcionek na swojej stronie. Ale ta metoda ma swoje wady i zalety.

plusy:

  • Poprzez CSS, można podłączyć dowolne czcionki formacie: ttf, OTF WOFF, SVG.
  • pliki czcionek są zapisywane na serwerze - nie będzie uzależnione od usług zewnętrznych.

Wady:

  • Aby prawidłowo podłączyć czcionki dla każdej powierzchni trzeba zarejestrować osobny kod.
  • Nie wiedząc, CSS można łatwo się zagubić.

Ale ...

można po prostu skopiować mój kod gotowy i gdzie trzeba określić jego wartość.

Krok 1: Transfer plików pobranych czcionek na swojej stronie internetowej. Można to zrobić za pośrednictwem hosting panelu sterowania lub poprzez FTP.

Proponuję utworzyć folderu czcionek w tym samym katalogu, co plik CSS. Przenieść wszystkie pliki czcionek w tym folderze.

Krok 2. przepisać samego początku pliku CSS następujący wpis:

@ czcionki twarz { 
czcionki rodziny: „MyWebFont”;
src: url ( '../ czcionek / WebFont.eot');
src: url (”../ czcionek / WebFont.eot iefix? ') Format (' EOT '),
url (' ../ czcionek / WebFont.woff ') Format (' WOFF '),
url (' ../ czcionki / WebFont.ttf ') Format (' TrueType '),
url (' ../ czcionek / WebFont.svg # webfont ') format (' SVG ");
czcionki wagi: normalny;
font-style: normal;
}

Gdzie MyWebFont - to nazwa czcionki, a wartość src (Liczby w nawiasach w cudzysłowach) - ich usytuowanie (względne linki). Musimy zidentyfikować każdy znak oddzielnie.

Czytaj więcej:   DO Responsive szablon dla strony

Ponieważ najpierw podłączyć normalny styl czcionki, właściwości font-weight oraz font-style przywiązują wagę do normy.

Krok 3: Po podłączeniu kursywa, wymienić następujące:

@ czcionki twarz { 
czcionki rodziny: „MyWebFont”;
src: url ( '../ czcionek / WebFont-Italic.eot');
src: url Format ( '../ czcionek / WebFont-Italic.eot iefix? ') (' EOT '),
url (' ../ czcionek / WebFont-Italic.woff ') Format (' WOFF'),
adres URL ( '../fonts/WebFont-Italic.ttf ') Format (' TrueType '),
url (' ../ czcionek / WebFont-Italic.svg # webfont ') Format (' SVG');
czcionki wagi: normalny;
font-style: italic;
}

Gdzie są takie same, tylko właściwość font-style przywiązujemy wagę do kursywą.

Krok 4: Aby połączyć pogrubienie, należy dodać następujący kod:

@ czcionki twarz { 
czcionki rodziny: „MyWebFont”;
src: url ( '../ czcionek / WebFont-Bold.eot');
src: url Format ( '? ../ czcionek / WebFont-Bold.eot iefix ') (' EOT '),
url (' ../ czcionek / WebFont-Bold.woff ') Format (' WOFF'),
adres URL ( '../fonts/WebFont-Bold.ttf ') Format (' TrueType '),
url (' ../ czcionek / WebFont-Bold.svg # webfont ') Format (' SVG');
czcionki wagi: pogrubienie;
font-style: normal;
}

W przypadku, gdy właściwość font-weight, poprosiliśmy śmiały znaczenie.

Nie zapomnij każdej powierzchni wskazać poprawną lokalizację pliku czcionki.

Krok 5. Aby połączyć odważne listy kursywy o następującej treści:

@ czcionki twarz { 
czcionki rodziny: „MyWebFont”;
src: url ( '../ czcionek / WebFont-kursywa-Bold.eot');
src: url ( '? ../ czcionek / WebFont-kursywa-Bold.eot iefix ') Format (' EOT '),
url (' ../ czcionek / WebFont-kursywa-Bold.woff ') Format (' WOFF' ),
url ( '../ czcionek / WebFont-kursywa-Bold.ttf 'Format (' TrueType '))
url (' ../ czcionek / WebFont-kursywa-Bold.svg # webfont ') Format (' SVG' );
czcionki wagi: pogrubienie;
font-style: italic;
}

Dobrze, że to wszystko 🙂 tylko podłączyć 4 styl czcionki na swojej stronie.

Ale jest jedna uwaga - to połączenie jest czcionka będą wyświetlane nieprawidłowo w przeglądarce Internet Explorer 8. wiadomością jest to, że przeglądarka pozostawił bardzo niewiele.

Jak podłączyć czcionek do miejsc w różnych CMS

Bez względu na silnik, witryna (WordPress, Joomla, Drupal, OpenCart) - jeśli masz dostęp do pliku CSS, można podłączyć poprzez czcionek jak Google Fonts i przesyłając je na serwer poprzez Fontsquirrel.

Cóż, to wszystko. Jeśli uważasz, że ten artykuł może być przydatny do innych webmasterów - udostępniać je w serwisach społecznościowych.

A także:

[Popup_trigger id = »3874" tag = rozpiętość» »] Zapisz się do mojego newslettera [/ popup_trigger], tak aby nie przegapić przydatnych i interesujących publikacji na blogu.

Kliknij poniższy link, aby uzyskać bezpłatny dostęp do krok po kroku samouczki wideo na temat łączenia czcionek.

czcionki przyłączeniowe

MATERIAŁ DESIGN CZCIONKI



Wybierz swój język

polskiangielski niemiecki hiszpański francuski włoski portugalski turecki arabski ukraiński szwedzki węgierski bułgarski estoński Chiński (uproszczony) wietnamski rumuński tajski słoweński słowacki serbski malajski norweski łotewski litewski koreański japoński indonezyjski hinduski hebrajski fiński grecki holenderski Czech duński chorwacki Chiński (tradycyjny) Filipińska urdu Azeybardzhansky ormiański Białoruski bengalski gruziński kazachski Kataloński mongolski rosyjski Tadzhitsky Tamil'skij telugu Uzbetsky


Dodaj komentarz

Twój e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *