Jak mogę używać czcionki Google Roboto na stronie internetowej?

163

Chcę używać czcionki Google Roboto na mojej stronie i postępuję zgodnie z tym samouczkiem:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

Pobrałem plik, który ma taką strukturę folderów:

wprowadź opis obrazu tutaj

Teraz mam trzy pytania:

  1. Mam css w swoim media/css/main.cssurl. Więc gdzie mam umieścić ten folder?
  2. Czy muszę wyodrębnić wszystkie pliki eot, svg itp. Ze wszystkich podfolderów i umieścić w fontsfolderze?
  3. Czy muszę utworzyć plik css fonts.css i dołączyć go do podstawowego pliku szablonu?

Przykład, którego używa

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

Jak powinien wyglądać mój adres, jeśli chcę mieć strukturę dir:

/media/fonts/roboto

html css fonts użytkownik26
źródło

Odpowiedzi:

257

Naprawdę nie musisz tego robić.

  • Przejdź do strony Google Web Fonts
  • wyszukaj Robotow polu wyszukiwania w prawym górnym rogu
  • Wybierz warianty czcionki, której chcesz użyć
  • kliknij „Wybierz tę czcionkę” u góry i wybierz potrzebne grubości i zestawy znaków.

Strona zawiera <link>element do umieszczenia na stronach oraz listę przykładowych font-familyreguł do wykorzystania w CSS.

Korzystanie z czcionek Google w ten sposób gwarantuje dostępność i zmniejsza przepustowość do własnego serwera.

Sunil Garg
źródło
Dzięki za to, to było idealne. Czy wiesz, które ustawienie Google używa do swoich list odtwarzania w sklepie Google Play. chcę mieć dokładnie taki styl. Nie znalazłem również linku ani fragmentu kodu w linku. widzę tam czcionki, ale nie ma kodu
użytkownik26
3
Fajnie, zapewniają też @import dla MNIEJ plików! Jednak testowanie bez połączenia internetowego LUB problemów z połączeniem Google (np .: Chiny) = BRAK czcionek ... Zauważyłem również, że nie ma Roboto Black (Roboto Bk) font-family: w rzeczywistości używają tylko 3 rodzin czcionek (Roboto, Roboto Condensed i Roboto Slab) wszystkie inne warianty Roboto są wprowadzane za pośrednictwem font-stylei font-weightzmian CSS. Idealnie więc po umieszczeniu Google <link>sprawdź, czy czcionki naprawdę tam są. Jeśli nie, użyj własnego (przy czym ładowanie wszystkich plików z jednej rodziny czcionek zwykle nie przekracza 0,5 MB).
Armfoot
7
@ user26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>Spowoduje to wczytanie wszystkich stylów tylko z jednej rodziny czcionek: Roboto. Jeśli jednak potrzebujesz rodziny czcionek spoza Google Fonts (na przykład Roboto Black ), potrzebujesz plików w swoich folderach i skopiuj przykładowy kod, który pokazałeś nam w swoim pytaniu, do swojego main.css (w ten sposób @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.lub jak zasugerowałem w moja odpowiedź).
Armfoot
14
-1 dla Using Google's fonts this way guaranties availability. Nic „nie gwarantuje dostępności”, a tym bardziej czcionki Google. Tak się składa, że ​​jestem jednym z miliardów + ludzi, dla których korzystanie z CDN Google oznacza, że ​​mnóstwo stron internetowych nie ładuje się poprawnie lub wcale. Nie mówię nikomu, co ma robić, ale nie sądzę, że CDN Google jest idealnym rozwiązaniem.
Nateowami
1
-1. Jak wspomniał @Nateowami, polegasz na serwerach Google (które mogą być blokowane w niektórych krajach), jest to szkodliwe dla prywatności , a wydajność może być lepsza, jeśli sam hostujesz swoje czcionki w CDN. To więcej pracy, ale to twoja praca, prawda?
Robin Métral
70

Istnieją DWIE podejścia , które możesz zastosować, aby używać licencjonowanych czcionek internetowych na swoich stronach:

  1. Usługi hostingu czcionek, takie jak Typekit, Fonts.com, Fontdeck itp., Zapewniają projektantom łatwy interfejs do zarządzania zakupionymi czcionkami i generowania łącza do dynamicznego pliku CSS lub JavaScript, który obsługuje czcionkę. Google nawet udostępnia tę usługę za darmo ( tutaj jest przykład żądanej czcionki Roboto). Typekit to jedyna usługa zapewniająca dodatkowe podpowiedzi do czcionek, aby zapewnić, że czcionki zajmują te same piksele w przeglądarkach.

    Moduły ładujące czcionki JS, takie jak ten używany przez Google i Typekit (tj. Moduł ładujący WebFont), zapewniają klasy CSS i wywołania zwrotne, które pomagają zarządzać FOUT, która może wystąpić, lub przekroczeniem limitu czasu odpowiedzi podczas pobierania czcionki.

    <head>
  <!-- get the required files from 3rd party sources -->
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <!-- use the font -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>

  2. Podejście zrób to sam polega na uzyskaniu licencji na czcionkę do użytku w Internecie i (opcjonalnie) użyciu narzędzia takiego jak generator FontSquirrel (lub jakieś oprogramowanie) w celu optymalizacji rozmiaru pliku. Następnie @font-facedo włączenia czcionek używana jest implementacja standardowej właściwości CSS w różnych przeglądarkach .

    Takie podejście może zapewnić lepszą wydajność ładowania, ponieważ masz bardziej szczegółową kontrolę nad znakami do uwzględnienia, a tym samym nad rozmiarem pliku.

    /* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

Krótko mówiąc:

Korzystanie z usług hostingu czcionek wraz z deklaracją @ font-face daje najlepsze wyniki pod względem ogólnej wydajności, zgodności i dostępności.

Źródło: https://www.artzstudio.com/2012/02/web-font-performance- Weighting-fontface-options- and- alternatives/

AKTUALIZACJA

Roboto: czcionka podpisu Google jest teraz open source

Możesz teraz ręcznie generować czcionki Roboto, korzystając z instrukcji, które można znaleźć tutaj .

Ashesh Kumar Singh
źródło
17

Wiem, stary post.

Jest to również możliwe za pomocą CSS @import url :

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
rocksteady
źródło
8
Twoje rozwiązanie to anty-wzór. Użycie tagu linku w znacznikach skutkuje szybszym pobraniem pliku CSS Google w porównaniu z @import; przeglądarka po prostu wykrywa odniesienie do zasobu ogólnie wcześniej, aw szczególności ze względu na moduł wstępnego ładowania (podczas analizowania kodu HTML vs. najpierw analizuj HTML, potem odnajduj plik CSS, potem go pobiera, analizuje i odnajduje @import, a następnie pobierz zaimportowany arkusz stylów).
Radko Dinev
3
Niekoniecznie. Używając Webpacka i wtyczek, wszystko to zostanie osadzone w twojej dystrybucji.
Spock
5

srcOdnosi się bezpośrednio do plików czcionek, więc jeśli umieścić je wszystkie /media/fonts/robotonależy odnieść się do nich w swoim main.css tak: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

..Idzie jeden folder w górę, co oznacza, że jesteś odnosząc się do mediafolderu, jeśli main.css znajduje się w /media/cssfolderze.

Musisz użyć ../fonts/roboto/we wszystkich odwołaniach do adresów URL w CSS (i upewnij się, że pliki znajdują się w tym folderze, a nie w podkatalogach, takich jak roboto_black_macroman).

Zasadniczo (odpowiadając na twoje pytania):

Mam css w moim adresie URL media / css / main.css. Więc gdzie muszę umieścić ten folder

Możesz go tam zostawić, ale pamiętaj, aby użyć src: url('../fonts/roboto/

Czy muszę wyodrębnić wszystkie pliki eot, svg itp. Ze wszystkich podfolderów i umieścić w folderze czcionek

Jeśli chcesz bezpośrednio odnosić się do tych plików (bez umieszczania podkatalogów w swoim kodzie CSS), to tak.

Czy muszę utworzyć plik css fonts.css i dołączyć go do mojego podstawowego pliku szablonu

Niekoniecznie, możesz po prostu umieścić ten kod w swoim pliku main.css. Ale dobrą praktyką jest oddzielenie czcionek od dostosowanego kodu CSS.

Oto przykład pliku czcionek LESS / CSS, którego używam:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(W tym przykładzie używam tylko ttf) Następnie używam @import "fonts";w moim pliku main.less ( less jest preprocesorem CSS, to sprawia, że ​​takie rzeczy są trochę łatwiejsze )

Armfoot
źródło
2

Oto, co zrobiłem, aby uzyskać pliki woff2, które chciałem do wdrożenia statycznego, bez konieczności korzystania z CDN

TYMCZASOWO dodaj cdn dla css, aby załadować czcionki roboto do pliku index.html i pozwolić załadować się stronie. z narzędzi Google dla deweloperów przejrzyj źródła i rozwiń węzeł fonts.googleapis.com oraz wyświetl zawartość css? family = Roboto: 300,400,500 & display = swap file i skopiuj zawartość. Umieść tę zawartość w pliku css w katalogu zasobów.

W pliku css usuń wszystkie elementy greckie, crylliczne i wietnamskie.

Spójrz na wiersze w tym pliku css, które są podobne do:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

skopiuj adres linku i wklej go w przeglądarce, pobierze czcionkę. Umieść tę czcionkę w folderze zasobów i zmień jej nazwę tutaj, a także w pliku css. Zrób to do innych linków, miałem 6 unikalnych plików woff2.

Wykonałem te same kroki dla ikon materialnych.

Teraz wróć i skomentuj wiersz, w którym wywołujesz cdn, i zamiast tego użyj nowego utworzonego pliku css.

Helzgate
źródło
1

Spróbuj tego

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
Główny programista
źródło
1

Użyj / fonts / lub / font / przed nazwą typu czcionki w arkuszu stylów CSS. Napotykam ten błąd, ale po tym działa dobrze.

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

}
Mohammed Javed
źródło
1

W przypadku witryny internetowej możesz użyć czcionki `` Roboto '', jak poniżej:

Jeśli utworzyłeś osobny plik css, umieść poniższy wiersz na górze pliku css jako:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

Lub jeśli nie chcesz tworzyć oddzielnego pliku, dodaj powyższą linię pomiędzy <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

następnie:

html, body {
    font-family: 'Roboto', sans-serif;
}
Pan Nikt
źródło
0

Czy przeczytałeś How_To_Use_Webfonts.html znajdujący się w tym pliku zip?

Po przeczytaniu wydaje się, że każdy podfolder czcionek ma już utworzony plik .css, którego możesz użyć, dołączając to:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
Barry Colebank Jr
źródło
0

To jest łatwe

każdy pobrany folder ma inny rodzaj czcionki roboto, co oznacza, że ​​są to różne czcionki

przykład: „roboto_regular_macroman”

aby użyć któregokolwiek z nich:

1- wyodrębnij folder czcionki, której chcesz użyć

2- Prześlij go obok pliku css

3- Teraz dołącz go do pliku css

przykład włączenia czcionki o nazwie „roboto_regular_macroman”:

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

uważaj na ścieżkę plików, tutaj wgrałem folder o nazwie "roboto_regular_macroman" w tym samym folderze, w którym znajduje się css

możesz teraz po prostu użyć czcionki, wpisując font-family: 'Roboto';

Omar Moustafa
źródło
0

To całkiem proste. Przejdź do czcionki w witrynie Google i dodaj jej łącze do nagłówka każdej strony, na której chcesz umieścić czcionkę.


źródło
0

Spędziłem godzinę, naprawiając problemy z czcionkami.

Powiązana odpowiedź - poniżej dotyczy React.jswitryny internetowej:

  1. Zainstaluj moduł npm:

    npm install --save typeface-roboto-mono

  2. zaimportuj do pliku .js, którego chcesz użyć
    jednego z poniższych :

    import "typeface-roboto-mono"; // jeśli import jest obsługiwany
    require('typeface-roboto-mono') // jeśli import nie jest obsługiwany

  3. Dla elementu możesz użyć
    jednego z poniższych:

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

Mam nadzieję, że to pomoże.

Manohar Reddy Poreddy
źródło