Las Fuentes personalizadas son una excelente manera de darle a su sitio web un aspecto nico. En lugar de usar Fuentes normales que est n disponibles en todos los dispositivos, puede seleccionar y conectar una fuente personalizada que solo se mostrar en su sitio web. Esto es especialmente til si desea transmitir un estado de nimo espec fico o crear un estilo corporativo.
Conectar una fuente personalizada en CSS es bastante simple. Pero antes de comenzar, necesitar la fuente en el formato correcto (generalmente .woff o .woff2). Puede descargar Fuentes prefabricadas o crearlas usted mismo utilizando servicios en l nea.
Una vez que tenga la fuente deseada, puede comenzar a conectarla a su estilo CSS. Necesitar s algunas l neas de c digo. En la secci n @ font-face, debe especificar el nombre de la fuente, la ruta de acceso y los formatos de archivo. A continuaci n, puede aplicar esta fuente a cualquier elemento de su sitio web utilizando la propiedad font-family.
Debe tenerse en cuenta que al conectar una fuente personalizada, debe tener cuidado con los derechos de autor. Aseg rese de que tiene derecho a usar la fuente seleccionada en su sitio web.
- C mo conectar una fuente CSS personalizada
- Medida 1: Elegir la fuente adecuada
- Paso 2: Cargar la fuente en el servidor
- Paso 3: Crear una carpeta para las Fuentes
- Paso 4: Agregar c digo al archivo de estilo CSS
- Paso 5: Conectar la fuente al elemento
- Paso 6: Comprobar el funcionamiento de la fuente personalizada
C mo conectar una fuente CSS personalizada
- Elija la fuente que desee: busque la fuente que desee en l nea o cree su propia fuente.
- Guarde la fuente en el servidor: cargue los archivos de fuente en su servidor o use una fuente externa para almacenarla.
- Importe la fuente a CSS: use la regla @font-face para importar la fuente. Especifique la ruta del archivo de fuente y especifique el nombre de la fuente.
- Aplique la fuente a los elementos: agregue la propiedad font family en las reglas CSS para los elementos deseados, especificando el nombre de fuente especificado en el paso 3.
Ahora su fuente personalizada se aplicar a los elementos seleccionados en la p gina web. Tenga en cuenta que es posible que la fuente no se muestre correctamente en diferentes dispositivos o navegadores, por lo que es una buena idea probarla en diferentes plataformas.
Paso 1: Elegir la fuente adecuada
Puede explorar diferentes tipos de Fuentes, como Fuentes serif, sans-serif, Fuentes monoespaciadas, Fuentes manuscritas y otros estilos. Hay muchos recursos gratuitos y de pago donde puede encontrar la fuente adecuada.
Es importante tener en cuenta que al elegir una fuente, tambi n debe prestar atenci n a su accesibilidad y legibilidad. Aseg rese de que la fuente sea f cil de Leer en diferentes dispositivos y en diferentes tama os.
Cuando encuentre una fuente que le guste y cumpla con sus requisitos, cargue los archivos de fuente en su servidor. Contin e con el siguiente paso para aprender c mo conectar una fuente personalizada a su sitio con CSS.
Paso 2: Cargar la fuente en el servidor
Para cargar una fuente en el servidor, tendr que saber la ruta a la carpeta en el servidor en el que almacena los archivos de fuente. La ruta generalmente se establece en relaci n con la carpeta ra z de su sitio web.
Para subir archivos al servidor, puede usar cualquier cliente FTP (como FileZilla) que le permita conectarse a su servidor y transferir archivos all .
Abra un cliente FTP e ingrese la direcci n de su servidor, as como las credenciales (nombre de usuario y contrase a) para conectarse al servidor. A continuaci n, vaya a la carpeta en la que desea descargar los archivos de fuente.
Seleccione los archivos de fuente en su computadora y arr strelos a una carpeta en el servidor. Espere mientras los archivos se cargan en el servidor. Esto puede llevar alg n tiempo, dependiendo del Tama o de los archivos y la velocidad de su conexi n a Internet.
Despu s de cargar los archivos de fuente en el servidor, aseg rese de que est n en la carpeta correcta y que tengan los permisos de lectura y ejecuci n correctos. Para saber qu permisos requieren los archivos de fuente, consulte la documentaci n de su servidor o p ngase en contacto con el soporte t cnico.
Cuando los archivos de fuente se cargan correctamente en el servidor y se encuentran en la carpeta correcta, est listo para pasar al siguiente paso: conectar y usar la fuente en su sitio web.
Paso 3: Crear una carpeta para las Fuentes
Antes de conectar una fuente personalizada a su sitio usando CSS, debe crear una carpeta para almacenar las Fuentes en su servidor.
1. Abra el sistema de archivos de su servidor o alojamiento.
2. Cree una nueva carpeta llamada "fonts" (o cualquier otro nombre que le resulte conveniente).
3. Coloque los archivos de su fuente personalizada en esta carpeta. Por lo general, la fuente consta de varios archivos, as que aseg rese de que todos los archivos de fuente est n dentro de la carpeta "fonts".
| Ejemplo de estructura de carpeta: |
|---|
fonts/
myfont.eot
- myfont.svg
- myfont.ttf
- Ahora tiene una carpeta "fonts" con los archivos de su fuente personalizada. Pasemos al siguiente paso, donde aprendemos c mo usar estos archivos de fuente en CSS.
- Paso 4: Agregar c digo al archivo de estilo CSS
Guarde el archivo de estilo CSS.
Por ejemplo, si desea aplicar una fuente personalizada a los encabezados en el archivo de estilo y agregue la propiedad
font-family
con el nombre de fuente personalizada:
}
| Aqu | Nombre_cast mico_rifta | debe reemplazarse con el nombre real de su fuente personalizada. |
|---|---|---|
| Despu s de agregar el c digo al archivo de estilo CSS y guardarlo, el navegador debe comenzar a aplicar una fuente personalizada a los elementos relevantes en la p gina web. | Paso 5: Conectar la fuente al elemento | Selector |
| Ejemplo | Descripci n | h1, .title |
h1
El ejemplo anterior usa el nombre de la fuente
'CustomFont'
que coincide con el nombre de fuente especificado en el paso 4. Si ha descargado y conectado varias Fuentes personalizadas diferentes, puede especificar sus nombres separados por comas para establecer una secuencia de uso prioritaria.
Adem s de la propiedad
font-family
. tambi n puede aplicar otras propiedades CSS como