El estilo de texto es una parte importante de la creaci n de sitios web atractivos y nicos. Una forma de hacer que el texto sea especial es usar Fuentes no est ndar. Sin embargo, para usar tales Fuentes, deben conectarse correctamente a una p gina web con CSS. En este tutorial paso a paso, le diremos c mo hacerlo.
Primero, para usar una fuente no est ndar, debe encontrar y descargar los archivos de fuente. Por lo general, las Fuentes no est ndar vienen en formatos TrueType u OpenType. Cuando haya descargado los archivos de fuente, gu rdelos en una carpeta separada en su servidor.
A continuaci n, debe conectar los archivos de fuente a su c digo CSS. Para hacer esto, agregue el siguiente c digo a su archivo CSS:
En este c digo, debe reemplazar 'Nombre_rift' con el nombre de su fuente y ' path_archivo.direcci n ' a la ruta del archivo de fuente en su servidor. Tambi n puede especificar varios formatos de archivo de fuente diferentes para que su texto se muestre correctamente en diferentes dispositivos y navegadores.
Despu s de conectar una fuente no est ndar a su archivo CSS, puede usarla especificando su nombre para la propiedad font-family en su c digo CSS. Por ejemplo:
h2 {
font-family: 'Nombre_rift', sans-serif;
}
Ahora su texto se mostrar con la fuente no est ndar seleccionada. No olvide que las Fuentes no est ndar se pueden cargar con retraso, por lo que es mejor usar las Fuentes del sistema como alternativa antes de cargar una fuente no est ndar.
- Conexi n de fuente CSS no est ndar
- Seleccionar y cargar una fuente
- Crear un directorio de Fuentes
- Agregar una fuente a un archivo CSS
Conexi n de fuente CSS no est ndar
Para utilizar una fuente no est ndar en una p gina web, debe seguir varios pasos.
Paso 1: Cargue el archivo de fuente en el servidor.
Puede cargar su archivo de fuente en el servidor utilizando un cliente FTP o cualquier otra herramienta similar.
Medida 2: Especifique la ruta del archivo de fuente en el c digo CSS.
Abra el archivo de estilo CSS que est utilizando en la p gina web y agregue la siguiente l nea de c digo:
@font-face {
font-family: 'Nombre_rifta';
src: url ('ruta de acceso');
}
Paso 3: Aplica la fuente en las propiedades CSS.
Para usar una fuente no est ndar para un elemento HTML, simplemente agregue la siguiente l nea de c digo a sus reglas CSS:
font-family: 'Nombre_rift', sans-serif;
Ahora, la fuente no est ndar se aplicar a los elementos seleccionados en su p gina web.
Seleccionar y cargar una fuente
Al elegir una fuente para usar en una p gina web, debe tener en cuenta su disponibilidad, legibilidad y compatibilidad con diferentes dispositivos y navegadores.
Una vez que haya elegido una fuente adecuada, puede cargarla en su sitio web utilizando los servicios de Fuentes o descargarla usted mismo.
Los servicios de Fuentes como Google Fonts o Adobe Fonts ofrecen una amplia selecci n de Fuentes que se pueden conectar a su sitio web simplemente agregando el c digo apropiado a su p gina.
Si est descargando una fuente usted mismo, debe asegurarse de tener los derechos para usar esa fuente. Cargue los archivos de fuente en su servidor y proporcione la ruta a ellos en su c digo CSS.
.
Aqu hay un ejemplo de c digo CSS para cargar una fuente:
| C digo CSS | Descripci n |
|---|---|
| Definici n de una fuente y su ruta de archivo | |
| Aplicar una fuente cargada a un elemento |
No olvide especificar una fuente alternativa o una familia de Fuentes para Mostrar su texto de manera m s confiable, en caso de que la fuente descargada no est disponible o no sea compatible.
Crear un directorio de Fuentes
Para conectar una fuente no est ndar a CSS, debe crear un directorio donde se almacenar n los archivos de fuente. Este directorio se puede llamar arbitrariamente, por ejemplo, "fonts".
Pasos para crear un directorio de Fuentes:
- En su proyecto, cree una nueva carpeta y as gnele el nombre "fonts" u otro nombre que desee.
- Dentro de la carpeta creada, agregue los archivos con la extensi n .woff, .woff2, .ttf u otras extensiones, dependiendo de los tipos de fuente que desee utilizar. Tenga en cuenta que los diferentes navegadores admiten diferentes formatos de fuente, por lo que es una buena idea agregar varios tipos de archivos diferentes para garantizar la m xima compatibilidad.
- Asigne nombres de archivo que coincidan con el nombre de la fuente o su prop sito (por ejemplo, "opensans.woff , opensansbold.woff2", etc.) para que sea m s f cil navegar por ellos cuando se conecta en CSS.
- Coloque los archivos de fuente en el directorio creado.
Despu s de crear un directorio con las Fuentes, estar listo para conectarlas en su archivo CSS con la regla @font-face.
Agregar una fuente a un archivo CSS
Para agregar una fuente personalizada a un archivo CSS, siga estos pasos:
- Descargue la fuente que desea usar y gu rdela en la carpeta de su proyecto.
- .
- url(' .woff2') format('woff2'),
- url(' .woff') format('woff'),
font-weight: normal;
font-style: normal;