Google Fonts es un Servicio gratuito que proporciona acceso a una amplia selecci n de Fuentes de calidad. Pueden ser muy tiles si desea agregar un aspecto fresco y atractivo a sus p ginas web. En este art culo vamos a ver c mo conectar Fuentes de Google en HTML.
Paso 1: en primer lugar, abra la p gina de Google Fonts (https://fonts.google.com/) y seleccione las Fuentes necesarias. Tenga en cuenta que Google Fonts ofrece una gran cantidad de Fuentes de diferentes estilos y Estados de nimo, por lo que puede elegir la opci n perfecta para su proyecto.
Paso 2: una vez que haya seleccionado las Fuentes deseadas, vaya a la secci n "Conexi n". Despl cese hacia abajo y ver el c digo que necesita agregar a su p gina HTML. Este c digo consiste en un enlace a un archivo CSS con las Fuentes seleccionadas.
Ejemplo:
Paso 3: Copie este c digo y p guelo entre las etiquetas y su p gina HTML. Luego, en la ubicaci n donde desea usar la fuente seleccionada, agregue las reglas CSS que desee.
Ahora puede usar la fuente especificando su nombre en las reglas CSS para los elementos relevantes en su p gina web.
- Fuentes de Google: conectar a trav s de HTML
- Paso 1: elegir y encontrar la fuente adecuada
- Paso 2: conectar la fuente al documento HTML
- Paso 3: aplicar Fuentes al texto
Fuentes de Google: conectar a trav s de HTML
1. Vaya al sitio web oficial de Google Fonts en el enlace https://fonts.google.com / y seleccione la fuente deseada. Puede usar filtros para buscar Fuentes en diferentes par metros.
2. Busque la fuente seleccionada y haga clic en el bot n "Seleccionar esta fuente". Puede agregar varias Fuentes para usarlas en su proyecto.
3. Despu s de seleccionar las Fuentes, haga clic en el icono "Familia seleccionada" en la esquina inferior derecha de la pantalla. A continuaci n, aparecer una nueva ventana con c digo CSS para conectar las Fuentes seleccionadas.
4. Copie el c digo CSS de la ventana y p guelo en la secci n de su documento HTML. Esto generalmente se hace dentro de una etiqueta o .
5. Para usar la fuente seleccionada en su proyecto, apl quela al elemento o selector que desee. Para hacer esto, use la propiedad CSS "font-family", especificando el nombre de la fuente que ve en el c digo CSS copiado del sitio web de Google Fonts.
Por ejemplo:
p {font-family: 'Roboto', sans-serif;
}
Despu s de completar todos estos pasos, la fuente seleccionada se aplicar a los elementos especificados en su sitio web o aplicaci n web. Ahora usted ser capaz de crear un dise o nico y atractivo para sus elementos de texto utilizando una amplia selecci n de Fuentes de Google!
Por lo tanto, la conexi n de Fuentes de Google a trav s de HTML es lo suficientemente simple y eficiente para crear un aspecto elegante y moderno de su proyecto web.
Paso 1: elegir y encontrar la fuente adecuada
Para comenzar, abra el sitio web de Google Fonts en https://fonts.google.com. Aqu encontrar una gran colecci n de diferentes Fuentes que puede utilizar en sus proyectos.
Puede filtrar las Fuentes seg n diferentes criterios, como popularidad, categor a, grosor de fuente y m s. Use la b squeda o navegue por las diferentes categor as para encontrar una fuente que se adapte a sus necesidades y se combine con el dise o de su sitio web.
Cuando encuentre la fuente que le interesa, haga clic en ella para abrir la p gina de la fuente. Aqu encontrar m s informaci n sobre la fuente, ejemplos de texto con su uso y varias configuraciones.
Medida 2: conectar una fuente a un documento HTML
Para conectar Fuentes de Google a su documento HTML, debe agregar un c digo especial a la secci n
su documento.
1. Vaya al sitio web de Google Fonts y seleccione la fuente que desee.
2. Una vez que haya seleccionado la fuente, haga clic en el bot n "Seleccionar estilos" al lado de ella.
4. Debajo de las Fuentes aparecer la secci n Incrustar. Copie el c digo de esta secci n.
5. Regrese a su documento HTML y pegue el c digo copiado en la secci n
- .
- Para todos los encabezados h1:
Para todos los p rrafos p:
p { font-family :' nombre de fuente', sans - serif;}
7. Guarde los cambios en su documento HTML y bralo en un navegador. Ahora deber a ver que su texto aparece en la fuente que seleccion con Google Fonts.
En CSS, puede establecer selectores para los diferentes elementos HTML que desea estilizar utilizando las nuevas Fuentes. Por ejemplo, si desea aplicar una fuente a todo el contenido de su sitio, puede usar un selector
body
body {
font-family: 'Nombre_rift', sans-serif;
}
Nombre_shrift