SeedProd
SeedProd

Documentación de SeedProd

Documentación, materiales de referencia y tutoriales para SeedProd

Cómo utilizar fuentes personalizadas con SeedProd

SeedProd admite fuentes personalizadas mediante CSS3 @font-face método. Esto te permite cargar cualquier archivo de fuente alojado en tu servidor y aplicarlo a los elementos de texto de tus páginas y plantillas.

Paso 1: Prepara tus archivos de fuentes

Descarga la fuente que desees y conviértela a formatos compatibles con la web. Para garantizar que la fuente se muestre correctamente en todos los navegadores y dispositivos, genera los siguientes tipos de archivos utilizando el generador de fuentes web de FontSquirrel:

  • WOFF: Formato de fuente abierto para la web, adecuado para páginas web.
  • WOFF2: una versión mejorada de WOFF con una mayor compresión.
  • TTF: fuente TrueType, ampliamente compatible con Mac y Windows.
  • SVG: formato de fuente de gráficos vectoriales escalables.
  • EOT: Embedded OpenType, utilizado para garantizar la compatibilidad con páginas web.
  • OTF: formato OpenType, compatible con la mayoría de las plataformas.

Paso 2: Sube tus archivos de fuentes a WordPress

Sube los archivos de fuentes a tu servidor de alojamiento de WordPress. Puedes hacerlo mediante FTP, el gestor de archivos del panel de control de tu alojamiento o un plugin de gestión de archivos. Elige cualquier carpeta dentro de tu /wp-content/ directorio como destino de la subida — por ejemplo, /wp-content/fonts/.

Anota la ruta URL completa de cada archivo de fuente que hayas subido. Necesitarás estas URL en el siguiente paso.

Paso 3: Registrar la fuente en el CSS global de SeedProd

Abre el editor de SeedProd y ve a Configuración global > CSS personalizado. Añade un @font-face regla que hace referencia a los archivos de fuentes que has subido. Sustituye YourFontName y sustituya las URL de ejemplo por el nombre real de la fuente y las rutas de los archivos.

Sección «CSS personalizado» de la configuración general en el editor de SeedProd
@font-face {
  font-family: 'YourFontName';
  src: url('https://example.com/wp-content/fonts/YourFont.woff2') format('woff2'),
       url('https://example.com/wp-content/fonts/YourFont.woff') format('woff'),
       url('https://example.com/wp-content/fonts/YourFont.ttf') format('truetype'),
       url('https://example.com/wp-content/fonts/YourFont.otf') format('opentype'),
       url('https://example.com/wp-content/fonts/YourFont.svg') format('svg'),
       url('https://example.com/wp-content/fonts/YourFont.eot') format('embedded-opentype');
}

Paso 4: Aplicar la fuente a los elementos

Una vez registrada la fuente, aplícala a cualquier elemento de tu página añadiendo una segunda regla CSS en la misma sección «CSS personalizado ». En el ejemplo siguiente se aplica la fuente a todas las etiquetas de encabezado; modifica los selectores para que se apliquen a los elementos que necesites.

h1, h2, h3 {
  font-family: 'YourFontName', sans-serif;
}
Fuente personalizada aplicada a los encabezados en SeedProd mediante CSS global

Tu fuente personalizada ya está disponible en todas tus páginas de SeedProd. Puedes utilizar selectores CSS adicionales para aplicar la fuente a párrafos, botones, enlaces de navegación o cualquier otro elemento, con el fin de mantener una tipografía coherente en todo tu sitio web.

Artículos relacionados

Documentación de SeedProd


  

    Reciba consejos y recursos gratuitos en su bandeja de entrada, junto con otros más de 60.000 usuarios.
  

  

    

      

        

          
        

        

          
        

        

          
        

      

    

  

  

    Síguenos