Las Fuentes juegan un papel importante en el dise o Visual de las p ginas web. Ayudan a resaltar los t tulos, el cuerpo y otros elementos de la p gina. Sin embargo, a veces las tareas de dise o no se pueden realizar utilizando Fuentes est ndar integradas en los navegadores.
En tales casos, debe agregar Fuentes especiales al sitio, que se descargar n del servidor web. En este art culo, veremos en detalle c mo agregar Fuentes TTF al sitio.
El formato TTF (TrueType Font) es uno de los formatos m s comunes y convenientes para almacenar y usar Fuentes. Las Fuentes en formato TTF se pueden instalar en el sistema operativo y se pueden usar en p ginas web.
Nota: para agregar una fuente TTF a un sitio web, debe tener acceso completo a l o utilizar las funciones proporcionadas por el proveedor de alojamiento.
- Carga de fuente TTF
- Crear un directorio de Fuentes
- Conexi n de fuente TTF a CSS
- Uso de la fuente TTF en HTML
- Comprobaci n de la visualizaci n de la fuente TTF en el sitio
Carga de fuente TTF
Antes de agregar una fuente TTF al sitio, debe descargar un archivo con esta fuente en Formato TrueType (TTF). Puede encontrar Fuentes TTF gratuitas en varios recursos web como Google Fonts, Font Squirrel, Etc.
Una vez que haya descargado el archivo de fuente TTF, debe alojarlo en el servidor de su sitio web. Se recomienda crear una carpeta separada para las Fuentes para facilitar la organizaci n de los archivos en el servidor.
Despu s de cargar la fuente TTF en el servidor, debe agregar el c digo CSS apropiado para indicar al navegador que debe usar esa fuente.
| Paso | C digo | Descripci n |
|---|---|---|
| 1 | @font-face { font-family :' nombre de fuente'; src: url ('ruta/a / fuente.ttf') format('truetype');} | Especifica una nueva fuente con el nombre especificado y la ruta del archivo TTF |
| 2 | body { font-family: 'Nombre de fuente', sans-serif;} | Aplica la nueva fuente a todo el texto de la p gina |
En el c digo anterior, reemplace " nombre de fuente "con el nombre de su fuente, y" ruta/a/fuente.ttf " a la ruta del archivo TTF descargado en su servidor. A continuaci n, agregue este c digo CSS a cada p gina web donde desee usar la nueva fuente.
Despu s de agregar este c digo, el navegador descargar la fuente TTF y lo aplicar al texto correspondiente en la p gina.
Crear un directorio de Fuentes
Antes de agregar Fuentes a su sitio, debe crear un directorio especial en el que almacenar los archivos de Fuentes. Para ello, siga estos pasos::
| Medida 1: | Abra el sistema de archivos de su servidor web. |
| Medida 2: | Vaya al directorio donde se almacena su sitio web. |
| Medida 3: | Cree una nueva carpeta con el nombre "fonts" u otro nombre que prefiera. |
| Medida 4: | Verifique los permisos de la carpeta para asegurarse de que sea de lectura y escritura. |
Ahora tiene un directorio especial para almacenar archivos de fuente en su sitio. En la siguiente secci n, explicaremos c mo agregar archivos de fuente a esta carpeta.
Conexi n de fuente TTF a CSS
Pasos para conectar una fuente TTF en un sitio web:
- Descargue la fuente TTF en su servidor o use una fuente externa si est disponible.
- Cree un nuevo archivo CSS o abra uno existente en el que agregar reglas CSS para la fuente.
- regla para especificar el nombre de fuente, la ruta de archivo y el formato de archivo:
`css
@font-face {
font-family: 'Nombre_rifta';
src: url ('path_archivo.woff2 ) format( woff2 ),
url ('path_archivo.woff ) format( woff );
font-weight: 400;
font-style: normal;
}
- : especifica el nombre de la fuente que se utilizar en CSS.
- : especifica las rutas del archivo de fuente. Puede usar m ltiples formatos de archivo de Fuentes para garantizar una mejor compatibilidad con diferentes navegadores.
- : especifica la saturaci n de la fuente (por ejemplo, 400 para una fuente normal).
- : especifica el estilo de fuente (por ejemplo, normal para una fuente normal).
:
`css
body {
font-family: 'Nombre_rift', sans-serif;
}
como una opci n de fuente alternativa que se utilizar si la fuente seleccionada no est disponible.
Ahora su sitio utiliza una fuente dada TTF p gina web.
Uso de la fuente TTF en HTML
Las Fuentes TTF (TrueType Fonts) son muy populares en el dise o web y usarlas en un sitio web puede darle un aspecto nico y elegante. Para utilizar Fuentes TTF en HTML, hay que seguir unos sencillos pasos.
1. Descargue el archivo de fuente TTF y agr guelo a la carpeta de su proyecto. Aseg rese de que la ruta del archivo de fuente sea correcta.
2. Cree un estilo CSS que describa el uso de la fuente. Por ejemplo:
3. En este ejemplo, creamos un estilo llamado "MyFont" y especificamos la ruta del archivo de fuente TTF. A continuaci n, utilizamos esta fuente de estilo para los p rrafos. Si el archivo de fuente est en una carpeta separada, aseg rese de especificar la ruta correcta.
Ejemplo de uso de la fuente TTF en HTML.
5. Para asegurarse de que la fuente funciona, abra una p gina web en un navegador y verifique si la fuente que est utilizando se muestra correctamente. Si algo sali mal, verifique la ruta del archivo de fuente y el nombre de la fuente de estilo CSS.
- Ahora ya sabes c mo usar las Fuentes TTF en HTML. Dale a tu sitio un toque nico y estilo agregando una hermosa fuente TTF.
- Para comprobar si la fuente TTF se muestra en el sitio, siga estos pasos::
- hay una declaraci n de fuente correcta que indica el nombre y la ruta del archivo TTF.
- Compruebe que el nombre de fuente TTF especificado se usa correctamente en las propiedades CSS para los elementos deseados, por ejemplo,
- font-family
.
- Vuelva a cargar la p gina para actualizar la memoria cach y aplicar los cambios.
- Despl cese por la p gina y observe el texto que debe aparecer en la fuente TTF. Si el texto se muestra con la fuente TTF seleccionada, significa que la fuente se ha agregado correctamente al sitio.
- Si la fuente TTF no aparece en la p gina web, se recomienda seguir estos pasos::
- Aseg rese de que el archivo de fuente TTF est disponible en la ruta especificada y que tenga los permisos de acceso correctos.
- Compruebe que el nombre de la fuente TTF se especifica correctamente en el archivo de estilo y que se utiliza en las propiedades CSS para los elementos deseados.
Verifique la sintaxis y el marcado correcto del archivo de estilo.