personalizadas - ¿Cómo importar la fuente web de Google en un archivo CSS?

fuentes web

Question

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

Answer 1

1. Simplemente vaya a https://fonts.google.com/
2. Añadir fuente haciendo clic en +
3. Ir a la fuente seleccionada> Incrustar> @IMPORT> copiar url y pegar en su archivo .css sobre la etiqueta del cuerpo.
4. Está hecho.

Answer 2

Agregue el siguiente código en su archivo CSS para importar las 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.

Tu archivo CSS debería verse como:

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

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

Hay 2 formas más de importar Google Web Fonts en su sitio web. Espero eso ayude.

Answer 3

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;
}

Answer 4

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

Ventaja:

• te permite alojar automáticamente esas fuentes de Google para mejores tiempos de respuesta

• elige tu (s) fuente (s)

• elige tu conjunto de caracteres
• Elija sus estilos de fuente / peso
• elige tu navegador de destino
• y obtiene los fragmentos de código CSS (agregue a su hoja de estilo css) más un zip de los archivos de fuentes para incluir en su proyecto

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

Answer 5

Jus pasar por el enlace.

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

Para importarlo al uso de hojas de estilo.

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

Answer 6

Podemos hacerlo fácilmente en css3. Tenemos que utilizar simplemente la declaración @import. El siguiente video describe fácilmente la forma de hacerlo. Así que ve y cuídalo.

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

Answer 7

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

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

Answer 8

Usa la etiqueta @import

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

Answer 9

Utilice el método de importación:

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

Obviamente, "Open Sans" es la fuente que se importa. Pero puedes reemplazarlo con el tuyo. Si es una fuente de una sola palabra, simplemente incluya el nombre de la fuente después de la family=... si son dos palabras, haga lo que hice y agregue un signo + entre cada palabra.

NOTA: Coloque @import en la primera línea del archivo CSS. ( Gracias a @Ronny por señalarlo ).

En la Biblioteca de Webfont de Google, cuando decide qué fuentes desea usar, le da un cuadro con tres pestañas. Cada pestaña es un método de inyección, HTML, CSS o JavaScript. La pestaña @import debería darle el código que necesita para los archivos css. Ver imagen:

Answer 10

<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 de su elección en el sitio web excluyendo los corchetes.

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

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

Luego, 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>

Answer 11

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

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