¿Cómo importar Google Web Font en un archivo CSS?

Estoy trabajando con un CMS al que solo tengo acceso al archivo CSS. Por lo tanto, no puedo incluir nada en el encabezado del documento. Me preguntaba si había una manera de importar la fuente web desde el archivo CSS.

Usa el @importmétodo:

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

Obviamente, "Open Sans" ( Open+Sans) es la fuente que se importa. Así que reemplácelo con el tuyo. Si el nombre de la fuente tiene varias palabras, codifíquelo en URL agregando un +signo entre cada palabra, como hice yo.

Asegúrese de colocar el @importen la parte superior de su CSS, antes de cualquier regla.

Google Fonts puede generar automáticamente la @importdirectiva por usted. Una vez que haya elegido una fuente, haga clic en el (+)ícono al lado. En la esquina inferior izquierda, aparecerá un contenedor titulado "1 familia seleccionada". Haga clic y se expandirá. Use la pestaña "Personalizar" para seleccionar opciones, luego vuelva a "Incrustar" y haga clic en "@importar" debajo de "Incrustar fuente". Copie el CSS entre las <style>etiquetas en su hoja de estilo.

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

Es mejor no usar @import. Simplemente use el elemento de enlace, como se muestra arriba, en la cabeza de su diseño.

Descargue la fuente ttf / otros archivos de formato, luego simplemente agregue este ejemplo de código CSS:

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

Agregue el siguiente código en su archivo CSS para importar fuentes web de Google.

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

Reemplace el valor del parámetro Open + Sans con su nombre de fuente.

Su archivo CSS debería verse así:

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

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

1. Solo ve a https://fonts.google.com/
2. Agregue fuente haciendo clic en +
3. Vaya a la fuente seleccionada> Incrustar> @IMPORT> copie la URL y pegue en su archivo .css sobre la etiqueta del cuerpo.
4. Está hecho.

Use la etiqueta @import

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

Junto con las respuestas anteriores, también considere este sitio; https://google-webfonts-helper.herokuapp.com/fonts

Ventaja:

• le permite alojar esas fuentes de Google para obtener mejores tiempos de respuesta

• elige tu (s) fuente (s)

• elige tu conjunto de personajes
• elige tus estilos de fuente / peso
• elige tu navegador de destino
• y obtienes los fragmentos de CSS (agrega a tu hoja de estilo CSS) más un zip de los archivos de fuente para incluir en tu proyecto

Por ejemplo, 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;
}

También puede usar @ font-face para vincular a las URL. http://www.css3.info/preview/web-fonts-with-font-face/

¿El CMS admite iframes? También puede lanzar un iframe en la parte superior de su contenido. Esto probablemente sería más lento, mejor incluirlo en su CSS.

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

Para elegir la fuente, puede visitar el enlace: https://fonts.google.com

Escriba el nombre de la fuente que elija en el sitio web, excluyendo los corchetes.

Por ejemplo , eligió Lobster como fuente de su elección, entonces,

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

Entonces puede usar esto normalmente como una familia de fuentes en todo su archivo HTML / CSS.

Por ejemplo

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

Solo ve a través del enlace

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

Para importarlo a la hoja de estilo, use

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

Podemos hacerlo fácilmente en css3. Simplemente tenemos que usar la declaración @import. El siguiente video describe fácilmente la forma de hacerlo. así que adelante y ten cuidado.

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