Las Fuentes en CSS son una herramienta esencial para crear un dise o de p gina web nico. Una forma de agregar una nueva fuente a un sitio es descargarla desde la computadora del usuario. Por lo tanto, ser posible utilizar Fuentes nicas e individuales que no est n presentes en el conjunto de Fuentes est ndar. Sin embargo, para que la fuente est disponible en todos los dispositivos, debe "traducirse" a formatos que los navegadores web puedan entender.
Esta instrucci n explicar paso a paso c mo instalar y usar su propia fuente en CSS desde una computadora.
Paso 1: Preparaci n de archivos de fuente
Antes de comenzar a usar una fuente en un sitio, debe preparar los archivos de fuente para la aplicaci n web. Los navegadores web admiten varios formatos de fuente como TrueType (TTF), OpenType (OTF), Web Open Font Format (WOFF) y Web Open Font Format 2 (WOFF2). Deber convertir el archivo de fuente a uno de estos formatos para que los navegadores web sean totalmente compatibles.
Paso 2: Crear un estilo CSS para conectar Fuentes
Una vez que haya preparado los archivos de fuente, deber crear un estilo CSS para conectar y usar las Fuentes en su sitio. En el estilo CSS, debe especificar la ruta de los archivos de fuente y especificar el nombre de la fuente para usar en varios selectores. Siga las instrucciones para agregar con xito la fuente a CSS desde la computadora.
- Paso 1. Seleccionar y cargar una fuente
- C mo elegir la fuente adecuada para el sitio?
- Paso 2. Colocaci n de Fuentes en la estructura de archivos del proyecto
- C mo crear una carpeta para Fuentes?
- Paso 3. Conectar Fuentes a un archivo CSS
- C mo agrego estilos para una nueva fuente en CSS?
Paso 1. Seleccionar y cargar una fuente
Una vez que haya elegido la fuente adecuada, deber descargarla en su computadora. Por lo general, las Fuentes se cargan en un formato .ttf o .otf. Simplemente busque y descargue el archivo de fuente del recurso seleccionado.
Tenga en cuenta que algunas Fuentes se pueden proporcionar con restricciones de uso comercial. Verifique la licencia de la fuente antes de usarla en su proyecto.
Una vez que se complete la descarga, estar listo para pasar al segundo paso: conectar la fuente a su sitio web o proyecto CSS.
C mo elegir la fuente adecuada para el sitio?
Elegir la fuente adecuada para su sitio es de gran importancia, ya que la fuente afecta en gran medida la percepci n y la facilidad de lectura del contenido. Aqu hay algunos consejos para ayudarlo a elegir la fuente correcta para su sitio:
- Tenga en cuenta los objetivos y la naturaleza del contenido: la Fuente debe coincidir con los objetivos de su sitio y la naturaleza del contenido que publica. Por ejemplo, para un sitio de negocios serio, las Fuentes cl sicas y elegantes son adecuadas, y para un blog activo, m s modernas e inusuales.
- Considere Fuentes seguras: Si desea que su fuente se muestre en todos los dispositivos y navegadores, se recomienda usar las llamadas Fuentes "seguras para la web". Estas son las Fuentes que normalmente est n disponibles en la mayor a de las computadoras. Ejemplos de Fuentes seguras para la web incluyen Arial, Verdana, Times New Roman y otros.
- Use Fuentes legibles: la Legibilidad es una de las principales cualidades de una fuente. Aseg rese de que la fuente que elija lea bien en la pantalla y tenga contornos de letras claros.
- Evite el exceso de emotividad: Algunas Fuentes pueden evocar emociones fuertes o asociarse con ciertas marcas o estilos. Al elegir una fuente para el sitio, se recomienda evitar la emotividad excesiva y dar preferencia a las opciones m s universales.
- Prueba y compara: Antes de elegir definitivamente una fuente para su sitio, aseg rese de probarla y compararla con otras Fuentes. Vea c mo se ve la fuente en diferentes dispositivos y en diferentes contenidos.
Esperemos que estos consejos lo ayuden a elegir la fuente adecuada para su sitio y crear contenido atractivo y legible.
Paso 2. Colocaci n de Fuentes en la estructura de archivos del proyecto
Una vez que haya descargado la fuente elegida, el siguiente paso es colocarla en la estructura de archivos de su proyecto.
1. Cree una carpeta para las Fuentes dentro del directorio ra z de su proyecto. Nombre esta carpeta "fonts" o cualquier otro nombre que desee.
2. Copie los archivos de fuente que desea usar en la carpeta "Fuentes"que cre . Por lo general, los archivos de fuente tienen una extensi n .ttf (TrueType Font) o .otf (OpenType Font).
3. Aseg rese de que los archivos de fuente est n dentro de la carpeta "fonts" y que tengan el nombre correcto. Por ejemplo, si tiene una fuente llamada " Roboto-Regular.ttf", el archivo debe colocarse en la ruta "fonts / Roboto-Regular.ttf .
4. Aseg rese de que los archivos de fuente est n disponibles desde el directorio ra z de su proyecto. Para hacer esto, abra la estructura de archivos de su proyecto a trav s de cualquier administrador de archivos o entorno de desarrollo y aseg rese de que la ruta de los archivos de fuente sea correcta.
Ahora que ha colocado los archivos de Fuentes en la estructura de archivos de su proyecto, puede pasar al siguiente paso: conectar las Fuentes con CSS.
C mo crear una carpeta para Fuentes?
Para instalar correctamente las Fuentes CSS desde el ordenador a la p gina web, debe crear una carpeta que almacene los archivos de fuente seleccionados. Siga los siguientes pasos para crear una carpeta de Fuentes:
- Abra el explorador de archivos en su computadora.
- Seleccione la ubicaci n donde desea crear una carpeta para las Fuentes.
- Haga clic derecho en un espacio vac o y seleccione Nuevo.
- En el men desplegable, seleccione "Carpeta".
- Escriba un nombre de carpeta para las Fuentes (por ejemplo," fonts") y presione la tecla"Enter".
Ahora tiene una carpeta de Fuentes donde puede guardar todos los archivos de Fuentes necesarios para usarlos en su p gina web. Recuerde que debe especificar la ruta correcta a esta carpeta cuando use Fuentes en el archivo CSS.
Paso 3. Conectar Fuentes a un archivo CSS
.
Aqu hay un c digo de ejemplo que muestra c mo conectar una fuente desde una computadora:
), que est en la computadora.
Despu s de especificar la regla
@font-face
h3
,
h4
,
h5
- ,
- h6
- ), as como especificar una fuente alternativa
- sans-serif
- en caso de que la fuente especificada no se pueda cargar.
- Despu s de conectar la fuente al archivo CSS y determinar su uso para los elementos deseados, guarde el archivo y actualice la p gina web en el navegador. Ahora deber a ver que la fuente especificada se aplica a los elementos correspondientes en la p gina.
Aqu est la instrucci n paso a paso:
1. Descargue el archivo con la fuente (.ttf, .otf o .woff2) en su computadora.
2. Cree una carpeta en su proyecto donde se almacenar el archivo de fuente. Por ejemplo, ll mala "fonts".
3. Coloque el archivo de fuente descargado en la carpeta "fonts".