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




para personalizadas (10)

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.

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.


Usa la etiqueta @import

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


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


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


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

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:


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


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

Usted puede, con un poco de jiggery-pokery no semántico. Mi enfoque habitual es animar la altura de un DIV exterior que tiene un solo hijo que es un DIV sin estilo utilizado solo para medir la altura del contenido.

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div>

A uno solo le gustaría poder prescindir del .measuringWrapper y simplemente configurar la altura del DIV en automático y tener esa animación, pero eso no parece funcionar (la altura se establece, pero no ocurre ninguna animación).

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div>

Mi interpretación es que se necesita una altura explícita para que se ejecute la animación. No puede obtener una animación en altura cuando la altura (la altura inicial o final) es auto .







css css3 fonts google-webfonts