Come importare Google Web Font nel file CSS?

Sto lavorando con un CMS a cui ho solo accesso al file CSS. Quindi, non posso includere nulla nell'HEAD del documento. Mi chiedevo se ci fosse un modo per importare il font web dal file CSS?

Usa il @importmetodo:

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

Ovviamente, "Open Sans" ( Open+Sans) è il carattere che viene importato. Quindi sostituiscilo con il tuo. Se il nome del carattere ha più parole, codifica l'URL aggiungendo un +segno tra ogni parola, come ho fatto io.

Assicurati di posizionare la @importparte superiore del CSS, prima di qualsiasi regola.

Google Fonts può generare automaticamente la @importdirettiva per te. Dopo aver scelto un carattere, fai clic (+)sull'icona accanto ad esso. Nell'angolo in basso a sinistra, apparirà un contenitore chiamato "1 famiglia selezionata". Cliccalo e si espanderà. Utilizzare la scheda "Personalizza" per selezionare le opzioni, quindi tornare a "Incorpora" e fare clic su "@importa" in "Incorpora carattere". Copia il CSS tra i <style>tag nel tuo foglio di stile.

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

Meglio non usare @import. Usa semplicemente l'elemento link, come mostrato sopra, nella testa del tuo layout.

Scarica il font ttf / altri file di formato, quindi aggiungi semplicemente questo esempio di codice CSS:

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

Aggiungi il codice sottostante nel tuo file CSS per importare Google Web Fonts.

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

Sostituisci il valore del parametro Open + Sans con il nome del tuo carattere.

Il tuo file CSS dovrebbe apparire come:

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

body{
   font-family: 'Open Sans',serif;
}

1. Vai su https://fonts.google.com/
2. Aggiungi carattere facendo clic su +
3. Vai al font selezionato> Incorpora> @IMPORT> copia l'URL e incolla il tuo file .css sopra il tag body.
4. E 'fatto.

Usa il tag @import

@import url('http://fonts.googleapis.com/css?family=Kavoon');

Insieme alle risposte di cui sopra, considera anche questo sito; https://google-webfonts-helper.herokuapp.com/fonts

Vantaggio:

• ti consente di ospitare autonomamente quei caratteri Google per tempi di risposta migliori

• scegli il tuo carattere

• scegli il tuo set di caratteri
• scegli il tuo stile di carattere / peso
• scegli il tuo browser di destinazione
• e ottieni i frammenti CSS (aggiungi al tuo foglio di stile CSS) più una zip dei file dei caratteri da includere nel tuo progetto

Ad esempio your_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;
}

Puoi anche usare @ font-face per collegarti agli URL. http://www.css3.info/preview/web-fonts-with-font-face/

Il CMS supporta iframe? Potresti anche essere in grado di gettare un iframe nella parte superiore dei tuoi contenuti. Probabilmente sarebbe più lento, meglio includerlo nel tuo CSS.

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

Per scegliere il carattere puoi visitare il link: https://fonts.google.com

Scrivi il nome del font che preferisci dal sito Web escludendo le parentesi.

Ad esempio, hai scelto Lobster come font a tua scelta,

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

Quindi puoi usarlo normalmente come una famiglia di caratteri nell'intero file HTML / CSS.

Per esempio

<h2 style="Lobster">Please Like This Answer</h2>

Jus passa attraverso il link

https://developers.google.com/fonts/docs/getting_started

Per importarlo nel foglio di stile utilizzare

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

Possiamo farlo facilmente in css3. Dobbiamo semplicemente usare la dichiarazione @import. Il seguente video descrive facilmente il modo in cui farlo. quindi vai avanti e attenzione.

https://www.youtube.com/watch?v=wlPr6EF6GAo