Usar fuentes personalizadas a la página web con CSS

En este artículo, vamos a aprender cómo utilizar fuentes personalizadas a la página web con CSS ? Fuentes de Google se pueden utilizar para mejorar la apariencia de la página web.

Fuentes juegan un papel importante en la creación de una impresión class un sitio web. Según un estudio, la página web con mejores fuentes son más propensos a mantener la confianza audiencia que los que no utilizan fuentes personalizadas. Mientras que las buenas fuentes web son caros, también hay biblioteca libre de las fuentes que se pueden utilizar en las páginas de Internet para mejorar la apariencia de la página web.

Utilizando el Google fuentes biblioteca es una buena opción. Contiene muchas fuentes populares que están disponibles for libre y son fáciles de añadir en sus proyectos. Simplemente enlazar el archivo de fuente y utilizarlo en tu CSS. Podemos añadir las fuentes personalizadas utilizando varios métodos, pero la única recomendada es la siguiente.

el enlace de la fuente. Tomemos un ejemplo de tipo de letra “Roboto” de Google Fuentes . Pega este vínculo en la etiqueta de cabecera de su archivo HTML justo por encima del archivo CSS, por lo que el CSS puede reconocer el archivo de fuente.

Código – HTML

<html>
<head>
<title>Custom Font</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
... body content
</html>

Después de añadir este enlace en el archivo HTML, ahora podemos acceder a esta fuente en nuestra página web. Usando propiedad font-familia del CSS que puede especificar esta nueva fuente junto con otras fuentes de repliegue. Supongamos Si el enlace no se carga, a continuación, CSS puede utilizar las fuentes de repliegue.

Este es un ejemplo,

Código – CSS

h1 {
font-family: 'Roboto', sans-serif;
}

Esto fija el elemento ‘Roboto’ fuente for partida. Si la fuente no se puede cargar, CSS va a cambiar el tipo de letra sans-serif. Aquí hay un ejemplo que utiliza las fuentes personalizadas en acción. Note el cambio en la legibilidad y la apariencia del contenido.

HTML con CSS

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Custom fonts in CSS</title>
<style>
.custom-font {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>Default font</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde voluptate, possimus quis id, excepturi nihil sit dicta, vitae itaque nesciunt, esse! A cumque esse neque, doloribus nulla. Fuga atque facere voluptatibus possimus, maxime iusto iste, ducimus omnis perferendis, et tempora nostrum placeat quibusdam explicabo accusantium eum ut? Quis ratione, repellendus!</p>
<br><br>
<h1 class="custom-font">Roboto font</h1>
<p class="custom-font">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quaerat, reprehenderit, a asperiores quae blanditiis veniam eum excepturi dolores rerum. Repellat minus repellendus beatae minima praesentium, dolores quae exercitationem nam saepe corporis earum esse, labore, rerum voluptatum veniam magni qui! Quos quaerat atque laborum sit iste, blanditiis natus placeat fuga?</p>
</body>
</html>

salida

Use custom fonts to webpage with CSS - 4

En este código, se aplica el tipo de letra utilizando font-family sólo para elementos con medida de fuente class. Usted notará la diferencia en la legibilidad y el aspecto tanto de las fuentes.

DEMO

El uso de fuentes personalizadas no sólo mejora la experiencia del usuario, sino que también proporciona un fideicomiso y la singularidad de su página web. Espero que les guste el artículo. ¿Se utiliza fuentes personalizadas ? Comparte tu opinión en los comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *