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?
źródło
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?
Użyj @import
metody:
@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 @import
na samej górze swojego CSS, przed jakimikolwiek regułami.
Czcionki Google mogą automatycznie wygenerować @import
dla 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.
@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>
.<link>
Zamiast tego użyj i zoptymalizuj jego dostawę.Lepiej nie używać @import. Wystarczy użyć elementu link, jak pokazano powyżej, w głowie układu.
źródło
Pobierz czcionkę ttf / inne pliki formatu, a następnie po prostu dodaj przykładowy kod CSS:
źródło
Dodaj poniższy kod do pliku CSS, aby zaimportować czcionki Google Web.
Zastąp wartość parametru Open + Sans nazwą czcionki.
Twój plik CSS powinien wyglądać następująco:
źródło
źródło
Użyj tagu @import
źródło
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ę
Np. Twój_theme.css
źródło
font-weight: 400
najpierw, 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.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.
źródło
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ę,
Następnie możesz użyć tego normalnie jako rodziny czcionek w całym pliku HTML / CSS.
Na przykład
źródło
Jus przechodzi przez link
https://developers.google.com/fonts/docs/getting_started
Aby zaimportować go do arkusza stylów, użyj
źródło
Możemy to łatwo zrobić w css3. Musimy po prostu użyć instrukcji @import. Poniższy film łatwo opisuje, jak to zrobić. więc śmiało i uważaj.
https://www.youtube.com/watch?v=wlPr6EF6GAo
źródło