Agregar Fuentes nicas a las p ginas web juega un papel importante en la creaci n de una apariencia llamativa y memorable del sitio. Afortunadamente, la tecnolog a moderna le permite conectar f cilmente la fuente descargada en un documento HTML.
Sin embargo, antes de iniciar el proceso de conexi n, aseg rese de tener la fuente descargada en el formato correcto. El procedimiento para conectar las Fuentes puede variar en funci n del uso que haga la p gina web de Fuentes normales, est ndar o de tipos nicos y espec ficos.
Para empezar, tendr que crear una carpeta en su servidor donde se almacenar el archivo de fuente. Se recomienda utilizar una carpeta llamada "fonts" para una organizaci n m s conveniente.
Tenga en cuenta que para conectar la fuente descargada a HTML, debe especificar la ruta del archivo de fuente relativa al directorio ra z de su sitio web. Se pueden usar etiquetas o estilos CSS para hacer esto.
Cuando un archivo de fuente est alojado en un servidor, puede conectarlo f cilmente a su p gina HTML utilizando el c digo de la etiqueta correspondiente . No olvide especificar la ruta del archivo de fuente en el atributo "href".
- Carga de fuente
- Descargue el archivo de fuente en su computadora
- Crear una carpeta para una fuente
- Abra el explorador de archivos y busque la carpeta donde se ubicar su fuente
- Crea una nueva carpeta llamada "fonts"
- Colocaci n de la fuente en una carpeta
- Mueva la fuente descargada a la carpeta "fonts"
- Declaraci n de fuente en CSS
- Abra el archivo CSS en el que se aplicar la nueva fuente
Carga de fuente
Para usar una fuente descargada en una p gina web, debe cargarla en su servidor junto con el resto de los archivos de su proyecto. Los siguientes son los pasos que debe seguir para cargar la fuente con xito.
- Cree una carpeta "fonts" en el servidor donde se aloja su proyecto. Si ya tiene una carpeta para almacenar Fuentes, puede usarla.
- Mueva los archivos de fuente a la carpeta "fonts"que cre . Sus archivos de fuente pueden tener extensiones .ttf, .otf, .woff o .woff2. Aseg rese de que todos los archivos de fuente est n en la carpeta "fonts".
- Aseg rese de que tiene la ruta correcta a los archivos de fuente. Por ejemplo, si su proyecto est en la carpeta "site"y su fuente se llama" font.ttf", la ruta del archivo de fuente se ver a as : "site / fonts / font.ttf .
Una vez que haya descargado y alojado los archivos de fuente en el servidor, puede comenzar a usar la fuente en su p gina web.
Ejemplo de uso de fuente en CSS:
@font-face {
font-family: 'Nombre_rifta';
src: url ('ruta de acceso.extensi n');
}
| body { | font-family: 'Nombre_rift', sans-serif; |
| } | |
| En el ejemplo proporcionado, reemplace "Nombre_rift" con el nombre de su fuente y "path_rift".extensi n " a la ruta del archivo de fuente. | Ahora puede usar su fuente descargada para cualquier elemento en su p gina web simplemente usando la propiedad CSS "font-family". |
| Descargue el archivo de fuente en su computadora | Antes de conectar la fuente descargada a un archivo HTML, debe descargarla en su computadora. Para ello, siga las instrucciones a continuaci n: |
1.
Abra un navegador web y busque un sitio que ofrezca descargar la fuente. Muchos recursos diferentes ofrecen una amplia selecci n de Fuentes para descargar. Seleccione la fuente que desee y vaya a la p gina de descarga.
2.
En la p gina de descarga, seleccione la opci n "Descargar" o "Descargar". Algunos sitios pueden requerir registro o pago para descargar la fuente. Si es as , siga las instrucciones en el sitio para continuar con la descarga.
- 3.
- Seleccione la ubicaci n en su computadora donde desea guardar el archivo de fuente. Tenga en cuenta esta ubicaci n para encontrar f cilmente el archivo m s tarde.
- 4.
- Haga clic en el bot n "Guardar" o "guardar" y espere a que se complete la descarga. La descarga puede tardar un tiempo, dependiendo del Tama o del archivo y la velocidad de su conexi n a Internet.
Ahora tiene un archivo de fuente en su computadora que se puede conectar a un archivo HTML y utilizar para estilizar el texto en su p gina web.
Crear una carpeta para una fuente
Antes de conectar la fuente descargada a HTML, debe crear una carpeta para la fuente en su computadora. Esto facilitar la administraci n de los archivos de fuente y asegurar que los enlaces en el c digo HTML funcionen correctamente.
Para crear una carpeta para una fuente, siga estos pasos::
Seleccione una ubicaci n para guardar las Fuentes. Es recomendable elegir un lugar conveniente para usted que sea f cil de recordar.
Haga clic con el bot n derecho del rat n en la ubicaci n seleccionada. En el men contextual que aparece, seleccione la opci n "Crear nueva carpeta".
Escriba un nombre para la carpeta. Proporcione un nombre descriptivo y descriptivo para la carpeta, de modo que pueda comprender f cilmente su contenido.
Presione la tecla Intro o presione el bot n izquierdo del mouse fuera de la carpeta para completar el proceso de creaci n de la carpeta.
Ejemplo: Si desea crear una carpeta llamada "fonts" en el Escritorio, haga clic con el bot n derecho en el Escritorio, seleccione "Crear nueva carpeta", escriba el nombre "fonts" y presione Entrar.
- Ahora ha creado una carpeta para la fuente y est listo para pasar al siguiente paso: conectar la fuente en el c digo HTML.
- Abra el explorador de archivos y busque la carpeta donde se ubicar su fuente
- Para comenzar, abra el explorador de archivos en su computadora. Puede hacerlo haciendo clic en el icono de la carpeta en el Escritorio o utilizando las teclas de acceso r pido Win + E.
Despu s de abrir el explorador de archivos, debe encontrar la carpeta en la que se ubicar la fuente descargada. Por lo general, las Fuentes se colocan en una carpeta llamada "Fuentes" o "Fuentes". A veces se pueden guardar en subcarpetas dentro de esas carpetas principales.
Cuando encuentre la carpeta deseada, brala para ver el contenido. Aqu deber a ver un archivo con la extensi n".ttf" (TrueType Font) o ".otf " (OpenType Font), que es su fuente descargada.
Tenga en cuenta que algunas Fuentes se pueden empaquetar en archivos. En este caso, debe extraer el archivo de fuente del archivo antes de continuar con los siguientes pasos.
- Crea una nueva carpeta llamada "fonts"
- Para crear una carpeta "fonts", siga estas sencillas instrucciones:
Haga clic derecho en el espacio libre en el Escritorio o en cualquier otro lugar donde desee crear una carpeta.
En el men contextual, seleccione la opci n Crear nuevo y luego seleccione Carpeta.
Escriba el nombre de la carpeta "fonts" y presione la tecla Intro.
Ahora tiene una carpeta "fonts" lista para almacenar todas las Fuentes descargadas. Contin e con el siguiente paso para aprender c mo conectar la fuente seleccionada a su documento HTML.
Colocaci n de la fuente en una carpeta
Una vez que haya descargado la fuente deseada, debe colocarla en la carpeta de su proyecto. Para ello, siga estos pasos::
Cree una nueva carpeta dentro de su proyecto o seleccione una carpeta ya existente donde desee almacenar las Fuentes.
Mueva la fuente descargada a la carpeta creada.
La fuente ahora est en la carpeta correcta y est lista para usar en su c digo HTML. En las siguientes secciones, veremos c mo conectar una fuente a su p gina web.
Mueva la fuente descargada a la carpeta "fonts"
1. Abra la carpeta de archivos descargados en su computadora.
2. Cree una nueva carpeta llamada "fonts" dentro de la carpeta del proyecto en la que se insertar la fuente.
3. Resalte el archivo de fuente (.ttf o .otf) y c pielo en la carpeta "fonts"creada.
4. Aseg rese de que el archivo de fuente est dentro de la carpeta "fonts".
5. Cierre la carpeta con los archivos descargados.
Declaraci n de fuente en CSS
Despu s de descargar y guardar la fuente requerida en su computadora, puede conectarla a su documento HTML usando CSS.
Para empezar, debe crear un bloque de c digo CSS que contenga la declaraci n de fuente. Para hacer esto, use una etiqueta y col quela dentro de la etiqueta de su documento HTML.
Dentro de la etiqueta, puede usar reglas CSS para personalizar el aspecto de su texto, incluidas las opciones de fuente.
Para usar una fuente descargada, debe especificar su ruta en la propiedad src utilizando la regla @font-face. A continuaci n se muestra un ejemplo de c mo conectar una fuente llamada " MyFont "que se encuentra dentro de la carpeta" fonts " en su servidor.
@font-face { |
}
En el ejemplo dado, especificamos que la fuente se llama " MyFont "y su archivo se encuentra en" fonts/MyFont.ttf . Puede personalizar la ruta y el nombre del archivo de acuerdo con sus propios datos. |
Despu s de declarar una fuente, puede usarla en la propiedad font-family para cualquier elemento en el que desee aplicar esa fuente. Por ejemplo: |
|
selector { property: value; }
. Use el elemento HTML o su clase, id como selector.