ttf - implementar fuente en css




¿Cómo importar la fuente web de Google en un archivo CSS? (8)

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.


  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.

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.


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


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.


Usa la etiqueta @import

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

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

<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.





google-webfonts