La elecci n de la fuente es un componente importante del dise o del sitio. Es capaz de influir en la percepci n del contenido y crear una atm sfera nica. Desafortunadamente, hay un conjunto limitado de Fuentes est ndar disponibles en la mayor a de los sitios. Pero, qu pasa si desea utilizar la fuente Word? En este art culo, le diremos c mo agregar una fuente Word a su sitio web.
El primer paso es descargar e instalar la fuente deseada en su computadora. Puede elegir una fuente adecuada entre las muchas disponibles en la red o crear la suya propia. Instalar la fuente en su computadora le permitir usarla en una variedad de programas, incluidos los navegadores web.
Despu s de instalar la fuente en su computadora, puede comenzar a agregarla a su sitio web. Hay varias formas de realizar esta tarea. Una de las formas m s f ciles y comunes es usar la regla @font face en una hoja de estilo CSS.
Para empezar, debe agregar el archivo de fuente original al servidor de su sitio. Por lo general, se encuentra en una carpeta con el contenido est tico del sitio. Puede cargar la fuente en el servidor a trav s de FTP o usar el panel de administraci n de archivos de su proveedor de alojamiento.
Despu s de colocar el archivo de fuente en el servidor, puede definirlo en una hoja de estilo CSS con la regla @font-face. En esta regla, especifica la ruta del archivo de fuente en el servidor, as como su nombre como desea que sea. Luego puede usar este t tulo como el valor de la propiedad font-family para cualquier elemento en su sitio.
Eso es todo! Ahora usted sabe c mo agregar una fuente Word a su sitio web. Aseg rese de verificar que la fuente se muestre correctamente en diferentes dispositivos y navegadores para garantizar una visualizaci n de alta calidad y entre navegadores de su sitio.
- Instrucciones detalladas: agregar Fuentes de Word al sitio
- Paso 1: Encontrar la fuente adecuada
- Paso 2: Descargar la fuente del sitio web oficial
- Medida 3: Crear una carpeta para una fuente en el servidor
- Paso 4: Carga de la fuente al servidor
- Paso 5: Prescribir reglas CSS para usar la fuente
- Paso 6: Verificar la visualizaci n de la fuente en el sitio
- Paso 7: Corregir errores y corregir la visualizaci n de la fuente
- Paso 8: Verificar la compatibilidad de Fuentes con diferentes navegadores y dispositivos
Instrucciones detalladas: agregar Fuentes de Word a un sitio
Paso 1: Elija la fuente adecuada
Antes de comenzar a agregar Fuentes de Word a su sitio, debe elegir la fuente adecuada. Hay muchos sitios donde puede encontrar Fuentes gratuitas y de pago para usar en su sitio. Elija una fuente que se adapte a su estilo y considere sus t rminos de licencia.
Paso 2: Sube los archivos de fuente al servidor
Una vez que haya elegido la fuente adecuada, deber cargar los archivos de fuente en su servidor. Cree una nueva carpeta en el servidor y cargue todos los archivos de fuente en esa carpeta.
Medida 3: Crea un archivo CSS para la fuente
Ahora necesita crear un archivo CSS para su fuente. Abra un Editor de texto y cree un nuevo archivo con la extensi n ".css . En este archivo, establecer reglas para su fuente.
Paso 4: Configurar el archivo CSS
En el archivo CSS, debe especificar la ruta a los archivos de fuente que carg en el servidor. Localice cada archivo de fuente y especifique su ruta en relaci n con la ubicaci n de su archivo CSS.
Su archivo CSS debe tener la siguiente estructura:
@font-face {
font-family: 'Nombre_rifta';
src: url ('path_archivo.eot'); /* IE9 Compat Modes */src: url ('path_archivo.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url ('path_archivo.woff2') format('woff2'), /* Super Modern Browsers */
url ('path_archivo.woff') format('woff'), /* Pretty Modern Browsers */
url ('path_archivo.ttf?#iefix') format('truetype'), /* Safari, Android, iOS */
url ('path_archivo.svg # Nombre_rift') format ('svg'); / * Legacy iOS */
font-weight: normal;
font-style: normal;
}
Paso 5: Aplica la fuente a los elementos de tu sitio
Ahora que ha creado un archivo CSS para su fuente, puede aplicar esa fuente a los elementos de su sitio. Para hacer esto, agregue la siguiente l nea a cualquier archivo CSS existente de su sitio o cree un nuevo archivo CSS y con ctelo a su c digo HTML:
body {
font-family: 'Nombre_rift', sans-serif;
}
- Reemplace "Nombre_shrift" con el nombre real de su fuente.
- Paso 6: vuelva a Cargar su sitio web y verifique el resultado
- Una vez que haya aplicado la fuente a los elementos de su sitio, vuelva a cargar su sitio y verifique el resultado. Si todo se hace correctamente, entonces usted deber a ver su nueva fuente Word en su sitio.
Ahora usted sabe c mo agregar Fuentes de Word a su sitio web. Elija las Fuentes adecuadas, c rguelas en el servidor, cree un archivo CSS, aplique la fuente a los elementos de su sitio y disfrute del nuevo estilo de su sitio web.
Paso 1: Encontrar la fuente adecuada
Antes de agregar una fuente a su sitio web, debe encontrar una opci n adecuada que se ajuste al dise o y al concepto general de la p gina web. Las siguientes instrucciones le ayudar n a elegir la fuente adecuada para su sitio:
- 1. Determine la naturaleza y el estado de nimo de su sitio web. Si se trata de un sitio web para empresas, una fuente corporativa o profesional puede ser adecuada para usted. Para proyectos creativos, puede usar Fuentes m s inusuales y expresivas.
- 2. Determine si su sitio web tiene contenido de texto o im genes. Si la mayor a de la informaci n en el sitio son textos, es importante elegir una fuente con buena legibilidad.
- 3. Explore diferentes recursos tipogr ficos y cat logos de Fuentes. Hay muchos recursos gratuitos y de pago, donde se puede encontrar una gran selecci n de Fuentes de diferentes estilos y direcciones.
- 4. Obtenga una vista previa de la fuente seleccionada en su sitio. Algunos recursos le permiten probar las Fuentes en tiempo real para ver c mo se ver n en su p gina web.
- 5. Considere el uso de Fuentes web. Las Fuentes web le permiten usar Fuentes no est ndar en un sitio sin tener que preinstalarlas en la computadora del usuario. Muchas Fuentes est n disponibles a trav s de servicios como Google Fonts o Typekit.
Al elegir la fuente adecuada, est listo para pasar al siguiente paso: agregarla a su sitio web.
Paso 2: Descargar la fuente del sitio web oficial
Para agregar una fuente a su sitio web, debe descargarla del sitio web oficial. Al elegir una fuente, aseg rese de tener derecho a usarla en su sitio.
Aqu hay instrucciones paso a paso sobre c mo descargar la fuente:
Vaya al sitio web oficial de la fuente. Busque la secci n de descarga o un enlace similar.
Haga clic en el enlace de descarga o en el bot n de descarga de la fuente.
Seleccione el formato de fuente que desee si est disponible en varios formatos (por ejemplo, TTF, OTF, WOFF).
Paso 3: Crear una carpeta para la fuente en el servidor
Para agregar una nueva fuente a su sitio, debe crear una carpeta separada para almacenarla en el servidor. Para ello, siga las instrucciones a continuaci n:
Crea una nueva carpeta para la fuente. As gnele un nombre para que su contenido sea f cil de entender, como "Fuentes" o "Fuentes".
Cargue los archivos de fuente en la carpeta que acaba de crear en el servidor.
Tenga en cuenta que es posible que deba cambiar los permisos del archivo de fuente para que est disponible para descargar desde su servidor.
Para usar una fuente conectada, debe averiguar su nombre. Puede encontrar el nombre de la fuente en el archivo CSS o en la p gina donde encontr la fuente para descargar.
Para definir reglas CSS para usar una fuente, debe crear una regla para el selector de elemento o clase para el que desea usar la fuente. Dentro de esta regla, especifique la propiedad
font-family
y el nombre de la fuente.
Por ejemplo, si desea usar una fuente llamada "MyFont" para todos los p rrafos de su sitio, debe agregar el siguiente c digo CSS:
/ * C digo CSS */
p {
font-family: "MyFont", sans-serif;
}
En este ejemplo, configuramos la fuente "MyFont" para todos los elementos
(p rrafos) en la p gina. Si tiene una clase o id espec fica que desea estilizar con su fuente, simplemente reemplace el selector
p
en su propio.
Ahora la fuente "MyFont" se usar para todos los elementos que coincidan con el selector especificado en su c digo CSS.