Jak zaimportować czcionkę internetową Google w pliku CSS?

258

Pracuję z CMS, do którego mam dostęp tylko do pliku CSS. Tak więc nie mogę dołączyć niczego do HEAD dokumentu. Zastanawiałem się, czy istnieje sposób na zaimportowanie czcionki internetowej z pliku CSS?

David
źródło

Odpowiedzi:

382

Użyj @importmetody:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Oczywiście „Open Sans” ( Open+Sans) to importowana czcionka. Więc zastąp go swoim. Jeśli nazwa czcionki zawiera wiele słów, zakoduj ją, dodając +znak między słowami, tak jak ja.

Upewnij się, że umieściłeś go @importna samej górze swojego CSS, przed jakimikolwiek regułami.

Czcionki Google mogą automatycznie wygenerować @importdla Ciebie dyrektywę. Po wybraniu czcionki kliknij (+)ikonę obok niej. W lewym dolnym rogu pojawi się pojemnik zatytułowany „Wybrano 1 rodzinę”. Kliknij, a rozwinie się. Użyj karty „Dostosuj”, aby wybrać opcje, a następnie przełącz się z powrotem do „Osadź” i kliknij „@import” w „Osadź czcionkę”. Skopiuj CSS między <style>znacznikami do swojego arkusza stylów.

ModernDesigner
źródło
25
Należy unikać korzystania z @import, ponieważ opóźni to ładowanie dołączonego zasobu do momentu pobrania pliku. Zobacz szczegółową odpowiedź tutaj: stackoverflow.com/a/12380004/925560
Renato Carvalho
5
Przeniesienie linii @import na szczyt rozwiązało moje życie! Dziękuję Ci!
joalcego
2
Dlaczego Google tak mówi? Google Insides twierdzi, że nie robi @import. developers.google.com/speed/pagespeed/insights ?
niebezpieczne89
2
To jest przestarzała odpowiedź. @importładuje się sekwencyjnie i najlepiej go unikać: varvy.com/pagespeed/avoid-css-import.html Korzysta z preferowanego (i domyślnego) sposobu ładowania czcionek Google <link>.
Chuck Le Butt
2
Pożałujesz tego, gdy przyjdziesz do SEO i zaczniesz optymalizować szybkość strony dzięki Google PageSpeed ​​Insights. <link>Zamiast tego użyj i zoptymalizuj jego dostawę.
Księgowy م
67
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

Lepiej nie używać @import. Wystarczy użyć elementu link, jak pokazano powyżej, w głowie układu.

Burk
źródło
19
Czy możesz wyjaśnić, dlaczego „Lepiej nie używać”? Szukałem tego pytania, ponieważ chciałbym wiedzieć, która metoda jest uważana za najlepszą.
Adam Hollow,
2
Miałem problem z programem Internet Explorer w @import. Czasami po prostu tego nie czyta.
Burk
6
W szczególności powiedział, że nie może użyć znacznika <link> w swoim nagłówku.
Nathan
26
+1 za użycie „linku”, ponieważ nie zablokuje równoległego ładowania innych plików zewnętrznych. „import” zablokuje równoległe ładowanie innych plików zewnętrznych.
Jahmic
2
Korzystając z @import, możesz uczynić czcionkę częścią stylizacji CSS zamiast znaczników HTML, co semantycznie wydaje się bardziej poprawne, i możesz wymieniać czcionki w witrynie za pomocą CSS. Ale jak skomentował Chuck, wydaje się, że bierzesz za to niewielką prędkość. Może taktować czasy ładowania, a następnie decydować indywidualnie. Pamiętaj, że w przypadku plików SVG @import jest jedynym sposobem, który działa AFAIK.
Mentalista
38

Pobierz czcionkę ttf / inne pliki formatu, a następnie po prostu dodaj przykładowy kod CSS:

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

Fidel
źródło
36

Dodaj poniższy kod do pliku CSS, aby zaimportować czcionki Google Web.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Zastąp wartość parametru Open + Sans nazwą czcionki.

Twój plik CSS powinien wyglądać następująco:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}
Shubham Kumar
źródło
13
  1. Wystarczy wejść na https://fonts.google.com/
  2. Dodaj czcionkę, klikając +
  3. Przejdź do wybranej czcionki> Osadź> @IMPORT> skopiuj adres URL i wklej do pliku .css powyżej tagu body.
  4. Zrobione.
karunesh
źródło
8

Użyj tagu @import

@import url('http://fonts.googleapis.com/css?family=Kavoon');
jmz7v
źródło
8

Wraz z powyższymi odpowiedziami rozważ także tę stronę; https://google-webfonts-helper.herokuapp.com/fonts

Korzyść:

  • umożliwia samodzielne hostowanie czcionek Google w celu uzyskania krótszych czasów odpowiedzi

  • wybierz swoją czcionkę

  • wybierz swój zestaw znaków
  • wybierz styl czcionki / wagę
  • wybierz docelową przeglądarkę
  • i dostajesz fragmenty CSS (dodaj do arkusza stylów css) oraz plik zip z czcionkami, które chcesz dołączyć do projektu

Np. Twój_theme.css

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

body { 
    font-family: 'Open Sans',sans-serif;
}
MarcoZen
źródło
1
Pozwala to również na załadowanie font-weight: 400najpierw, a następnie załadowanie reszty czcionki przy użyciu tego samego kodu bez argumentów. Pozwala to na szybsze wyświetlanie, a jeśli nie potrzebujesz całej czcionki, mniejsze pliki CSS.
moto
4

Możesz również użyć @ font-face, aby utworzyć link do adresów URL. http://www.css3.info/preview/web-fonts-with-font-face/

Czy CMS obsługuje iframe? Być może uda Ci się także umieścić element iframe w górnej części treści. Prawdopodobnie byłoby to wolniejsze - lepiej dołączyć to do swojego CSS.

Eric Keyte
źródło
3
<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

Aby wybrać czcionkę, odwiedź link: https://fonts.google.com

Wpisz wybraną czcionkę ze strony internetowej, z wyłączeniem nawiasów.

Na przykład wybrałeś Lobster jako wybraną czcionkę,

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

Następnie możesz użyć tego normalnie jako rodziny czcionek w całym pliku HTML / CSS.

Na przykład

<h2 style="Lobster">Please Like This Answer</h2>
RohanVTK
źródło