SeedProd
SeedProd

Documentación de SeedProd

Documentación, Materiales de Referencia y Tutoriales para SeedProd

Cómo Usar Fuentes Personalizadas con SeedProd

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

Paso 1: Prepara tus archivos de fuente

Descarga la fuente deseada y conviértela a formatos compatibles con la web. Para asegurar que tu fuente se muestre correctamente en todos los navegadores y dispositivos, genera los siguientes tipos de archivo usando el Generador de fuentes web de FontSquirrel:

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

Paso 2: Sube tus archivos de fuente a WordPress

Sube tus archivos de fuente a tu servidor de alojamiento de WordPress. Puedes hacerlo usando FTP, el Administrador de archivos de tu panel de control de alojamiento o un plugin de Administrador de archivos. Elige cualquier carpeta dentro de tu directorio /wp-content/ como destino de carga; por ejemplo, /wp-content/fonts/.

Toma nota de la ruta URL completa de cada archivo de fuente subido. Necesitarás estas URL en el siguiente paso.

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

Abre el editor de SeedProd y ve a Configuración global > CSS personalizado. Agrega una regla @font-face que haga referencia a tus archivos de fuente subidos. Reemplaza YourFontName y las URL de ejemplo con el nombre de tu fuente y las rutas de archivo reales.

Sección CSS personalizado de Configuración global 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: Aplica la fuente a los elementos

Una vez que la fuente esté registrada, aplícala a cualquier elemento de tu página agregando una segunda regla CSS en la misma sección de CSS personalizado. El siguiente ejemplo aplica la fuente a todas las etiquetas de encabezado; ajusta los selectores para apuntar a los elementos que necesites.

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

Tu fuente personalizada ahora está disponible en todas tus páginas de SeedProd. Puedes usar selectores CSS adicionales para aplicar la fuente a párrafos, botones, enlaces de navegación o cualquier otro elemento para mantener tu tipografía consistente en todo tu sitio.

Artículos Relacionados

Documentación de SeedProd


  
Recibe consejos y recursos gratuitos directamente en tu bandeja de entrada, junto con más de 60.000 personas.

  

    

      

        

          
        

        

          
        

        

          
        

      

    

  

  

    Síguenos