1. IronPDF
  2. Guías
  3. Fuentes (Web e Icono)
Cómo configurar fuentes en PDFs C#

Configuración de fuentes en PDF con IronPDF C#

Curtis Chau
Curtis Chau
Actualizado:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF permite a los desarrolladores de C# crear archivos PDF con fuentes web personalizadas y fuentes de iconos desde HTML. Admite servicios de fuentes externos como Google Fonts y archivos de fuentes locales a través de reglas CSS @font-face , lo que garantiza una tipografía consistente en todos los PDF generados.

Una fuente web es una fuente especializada diseñada para uso en sitios web. Estas fuentes están alojadas en servidores web y son descargadas por navegadores web para asegurar una representación de texto consistente y visualmente atractiva en sitios web, independientemente de la disponibilidad local de fuentes del usuario. Adicionalmente, las fuentes de íconos, que utilizan símbolos y glifos, se utilizan a menudo en el diseño web para crear íconos escalables y personalizables y mantener una interfaz de usuario visualmente consistente a través de la manipulación de CSS. Con las capacidades de administración de fuentes de IronPDF, los desarrolladores pueden integrar fácilmente estas fuentes en su flujo de trabajo de generación de PDF.

CSS incluye fuentes web, permitiéndote especificar archivos de fuentes para descargar cuando se accede a tu sitio web. IronPDF admite la carga de fuentes y la conversión a PDF desde HTML, lo que lo hace ideal para crear documentos que requieren estándares específicos de marca o tipografía. Para los desarrolladores que trabajan con contenido internacional, IronPDF también proporciona UTF-8 y compatibilidad con idiomas internacionales.

Inicio rápido: Uso de fuentes web en la generación de PDF

Incorpore fuentes web y de iconos a sus PDF mediante la biblioteca C# de IronPDF. Esta guía le muestra cómo renderizar contenido HTML con fuentes personalizadas, garantizando PDF coherentes y visualmente atractivos. Simplemente representa el HTML con IronPDF y guarda tu documento estilizado en segundos. Antes de empezar, asegúrese de haber instalado IronPDF en su proyecto.

Nuget IconEmpieza a crear PDF con NuGet ahora:

  1. Instalar IronPDF con el gestor de paquetes NuGet

    PM > Install-Package IronPdf

  2. Copie y ejecute este fragmento de código.

    new IronPdf.ChromePdfRenderer { RenderingOptions = { WaitFor = IronPdf.Rendering.WaitFor.AllFontsLoaded(2000) } }
    .RenderHtmlAsPdf("<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\">" +
                     "<link href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\" rel=\"stylesheet\">" +
                     "<p style=\"font-family:'Lobster', serif; font-size:30px;\">Hello Google Font</p>" +
                     "<i class=\"fa fa-coffee\" style=\"font-size:40px; color:#b00;\"></i>")
    .SaveAs("webfonts-icons.pdf");

  3. Despliegue para probar en su entorno real

    Empieza a utilizar IronPDF en tu proyecto hoy mismo con una prueba gratuita
    arrow pointer

Flujo de trabajo mínimo (5 pasos)

  1. Descargue la biblioteca C# IronPDF para configurar fuentes en PDF
  2. Utilice HTML para importar o solicitar fuentes de una fuente externa
  3. Retrasar el proceso de renderización para asegurar la carga adecuada de fuentes
  4. Renderizar el HTML a PDF como de costumbre
  5. Importar archivo de fuente usando la regla @font-face en el estilo CSS

¿Cómo utilizar WebFonts e iconos en PDF?

IronPDF admite WebFonts (como Google Fonts y la API de fuentes web de Adobe) y fuentes de iconos, como las utilizadas por Bootstrap y FontAwesome. Este soporte hace que IronPDF sea adecuado para proyectos que requieren una tipografía sofisticada, desde documentos sencillos hasta informes complejos con elementos de marca.

{"w":"## Ejemplo de retraso de renderizaci\u00f3n personalizada"} Cuando una fuente no se carga correctamente, puede resultar en una página en blanco sin texto. Puedes usar el método WaitFor.AllFontsLoaded para esperar hasta que todas las fuentes se carguen asignando un tiempo máximo de espera. El tiempo máximo de espera por defecto es de 500ms. Para situaciones más complejas que impliquen JavaScript o contenido dinámico, explore nuestro Tutorial de HTML a PDF que cubre técnicas avanzadas de renderizado.

Aquí hay un pequeño ejemplo de cómo usar un WebFont llamado Lobster en tu proyecto.

:path=/static-assets/pdf/content-code-examples/how-to/webfonts-webicons-render-webfont.cs
using IronPdf;

// HTML contains webfont
var html = @"<link href=""https://fonts.googleapis.com/css?family=Lobster"" rel=""stylesheet"">
<p style=""font-family: 'Lobster', serif; font-size:30px;"" > Hello Google Fonts</p>";

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Wait for font to load
renderer.RenderingOptions.WaitFor.AllFontsLoaded(2000);

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

// Export the PDF
pdf.SaveAs("font-test.pdf");
$vbLabelText   $csharpLabel

Explore más opciones de WaitFor, como las de fuentes, JavaScript, elementos HTML y ralentí de red en la documentación de la clase WaitFor(/how-to/waitfor/).' Para diseños responsivos que adaptan las fuentes en función del tamaño de la pantalla, consulta nuestra guía sobre CSS responsivo para la renderización de PDF](/how-to/html-to-pdf-responsive-css/).

¿Por qué es importante el tiempo de carga de las fuentes?

Cuando una fuente no se carga correctamente, puede resultar en una página en blanco sin texto. Puedes usar el método WaitFor.AllFontsLoaded para esperar hasta que todas las fuentes se carguen asignando un tiempo máximo de espera. El tiempo máximo de espera por defecto es de 500ms. Esta consideración temporal es especialmente importante cuando se trabaja con aplicaciones web complejas o cuando se renderiza contenido WebGL en PDF, donde varios recursos deben cargarse secuencialmente.

Los retrasos en la carga de las fuentes pueden variar en función de varios factores, como la velocidad de la red, el tamaño del archivo de la fuente y el tiempo de respuesta del servidor. Cuando se trabaja con varias fuentes personalizadas o bibliotecas de iconos, se recomienda aumentar el tiempo de espera para garantizar que toda la tipografía se muestra correctamente. Esto es especialmente importante en documentos profesionales en los que la falta de fuentes puede afectar a la legibilidad y a la coherencia de la marca.

¿Qué servicios de fuentes son compatibles?

IronPDF admite WebFonts (como Google Fonts y la API de fuentes web de Adobe) y fuentes de iconos, como las utilizadas por Bootstrap y FontAwesome. Además, IronPDF es compatible con:

  • Google Fonts (catálogo completo)
  • Fuentes Adobe (Typekit)
  • Iconos Font Awesome (todas las versiones)
  • Iconos de Bootstrap
  • Iconos de Material Design
  • Servicios de fuentes web personalizadas mediante etiquetas CSS @import o link
  • Archivos de fuentes autoalojados en varios formatos (TTF, OTF, WOFF, WOFF2)

¿Qué ocurre si las fuentes no se cargan correctamente?

{"w":"## Ejemplo de retraso de renderizaci\u00f3n personalizada"} Cuando una fuente no se carga correctamente, puede resultar en una página en blanco sin texto. En estos casos, los navegadores suelen recurrir a las fuentes predeterminadas del sistema, lo que puede alterar la coherencia visual del documento. IronPDF ofrece varios mecanismos para gestionar los fallos de carga de fuentes:

  1. Cadenas de fuentes : Define múltiples fuentes en tu declaración CSS font-family
  2. Tiempos de espera ampliados: Aumente el tiempo de espera de AllFontsLoaded para conexiones más lentas
  3. Incorporación de fuentes locales: Utilice @font-face con fuentes codificadas en base64 para garantizar su disponibilidad
  4. Precarga de fuentes: Utilizar etiquetas HTML de precarga para priorizar la carga de fuentes

¿Cómo puedo importar archivos de fuentes directamente?

Para usar un archivo de fuente existente, aplica la regla @font-face en el estilo CSS. También funciona cuando se utiliza una combinación de la regla @font-face y la incrustación de archivos woff codificados en base64. En el siguiente ejemplo, estaré usando la fuente Pixelify Sans.

:path=/static-assets/pdf/content-code-examples/how-to/webfonts-webicons-custom-font.cs
using IronPdf;

// Import custom font
string html = @"<!DOCTYPE html>
<html>
<head>
<style>
@font-face {font-family: 'Pixelify';
src: url('fonts\PixelifySans-VariableFont_wght.ttf');
}
p {
    font-family: 'Pixelify';
    font-size: 70px;
}
</style>
</head>
<body>
<p>Custom font</p>
</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

// Export the PDF
pdf.SaveAs("customFont.pdf");
$vbLabelText   $csharpLabel

¿Qué formatos de archivo de fuentes puedo utilizar?

Para usar un archivo de fuente existente, aplica la regla @font-face en el estilo CSS. También funciona cuando se utiliza una combinación de la regla @font-face y la incrustación de archivos woff codificados en base64. IronPDF es compatible con los siguientes formatos de archivo de fuentes:

  • TTF (TrueType Font): Ampliamente compatible, ideal tanto para pantalla como para impresión
  • OTF (OpenType Font): Características tipográficas avanzadas, adecuadas para documentos profesionales
  • WOFF (Web Open Font Format): Formato comprimido optimizado para su uso en la web
  • WOFF2: compresión mejorada respecto a WOFF, archivos más pequeños
  • EOT (Embedded OpenType): Formato heredado para navegadores antiguos
  • Fuentes SVG: Fuentes basadas en vectores (con limitaciones en algunas plataformas)

¿Cuándo debo usar fuentes locales frente a fuentes web?

Para usar un archivo de fuente existente, aplica la regla @font-face en el estilo CSS. La elección entre fuentes locales y web depende de varios factores:

Utilice fuentes locales cuando:

  • Trabajo fuera de línea o en entornos de red restringidos
  • Exigencia de disponibilidad de fuentes garantizada
  • Fuentes propietarias o con licencia
  • Optimización para una renderización más rápida sin retrasos en la red
  • Creación de documentos con estrictos requisitos de conformidad

Utilice fuentes web cuando:

  • Uso de bibliotecas de fuentes grandes como Google Fonts
  • Requerir actualizaciones automáticas de los archivos de fuentes
  • Minimizar el tamaño de los paquetes de aplicaciones
  • Trabajo con requisitos tipográficos que cambian con frecuencia
  • Creación de aplicaciones que ya dependen de la conectividad a Internet

¿Cuáles son las limitaciones al utilizar Azure?

La plataforma de alojamiento de Azure no admite servidores que carguen fuentes SVG en sus niveles compartidos más bajos de aplicaciones web. Sin embargo, el VPS y el Rol Web de Azure no están aislados de la misma manera y sí admiten la representación de fuentes web. Para obtener orientación detallada sobre la implementación de Azure, consulte nuestra Guía de implementación de Azure, que cubre todas las limitaciones y soluciones específicas de cada nivel.

¿Qué niveles de Azure admiten el renderizado de fuentes?

Sin embargo, el VPS y el Rol Web de Azure no están aislados de la misma manera y sí admiten la representación de fuentes web. A continuación se ofrece un desglose de la compatibilidad con los niveles de Azure:

Soporte completo de fuentes:

  • Máquinas virtuales Azure (todos los tamaños)
  • Funciones web de Azure
  • Niveles Premium de App Service (P1v2, P2v2, P3v2)
  • App Service Niveles aislados

Soporte de fuentes limitado:

  • Nivel básico de App Service (B1, B2, B3) - Solo fuentes web
  • App Service Standard tier (S1, S2, S3) - Algunas restricciones de fuentes SVG

Sin compatibilidad con fuentes personalizadas:

  • Nivel gratuito de App Service (F1)
  • App Service Nivel compartido (D1)

¿Por qué los niveles inferiores de Azure tienen restricciones de fuentes?

La plataforma de alojamiento Azure no admite servidores que carguen fuentes SVG en sus niveles inferiores de aplicaciones web compartidas debido a restricciones de sandboxing y limitaciones de recursos. Los niveles inferiores aplican estrictos límites de seguridad que impiden determinadas operaciones a nivel de sistema necesarias para la representación de fuentes personalizadas. Estas restricciones ayudan a Azure a mantener el aislamiento multiusuario y evitar el abuso de recursos en entornos compartidos.

Para superar estas limitaciones, tenga en cuenta lo siguiente

  1. Cómo incrustar fuentes como cadenas codificadas en base64 en tu CSS
  2. Uso exclusivo de fuentes web de CDN
  3. Pretraducción de PDF en un entorno compatible
  4. Actualización a un nivel superior de Azure con compatibilidad total con fuentes

Preguntas Frecuentes

¿Cómo puedo utilizar Google Fonts en mis documentos PDF?

IronPDF es compatible con Google Fonts a través del renderizado HTML. Sólo tiene que incluir el enlace de Google Fonts en la sección head de HTML y aplicar la familia de fuentes en CSS. IronPDF descargará y renderizará estas fuentes al generar el PDF, garantizando que su tipografía personalizada aparezca correctamente en el documento final.

¿Por qué mis fuentes web no aparecen correctamente en el PDF generado?

Las fuentes web a menudo necesitan tiempo para cargarse antes de renderizarse. IronPDF proporciona una opción WaitFor.AllFontsLoaded() en RenderingOptions que permite establecer un retraso (en milisegundos) para garantizar que las fuentes se cargan completamente antes de la generación del PDF. Esto evita que falten fuentes o que se generen incorrectamente.

¿Puedo utilizar iconos de FontAwesome en mis PDF?

Sí, IronPDF es totalmente compatible con FontAwesome y otras fuentes de iconos. Incluya el CSS de FontAwesome en su HTML y utilice las clases de iconos adecuadas. IronPDF representará estas fuentes de iconos como gráficos vectoriales en su PDF, manteniendo su escalabilidad y calidad visual.

¿Cómo puedo utilizar archivos de fuentes locales con @font-face?

IronPDF admite reglas CSS @font-face para cargar archivos de fuentes locales. Defina su regla @font-face en su CSS, especificando la ruta del archivo de fuentes y, a continuación, aplique la familia de fuentes a sus elementos HTML. IronPDF incrustará estas fuentes personalizadas directamente en el PDF durante la renderización.

¿Qué formatos de fuente son compatibles con la generación de PDF?

IronPDF es compatible con los formatos de fuentes web estándar, incluidos los archivos WOFF, WOFF2, TTF y OTF cuando se utilizan mediante reglas CSS @font-face o servicios de fuentes externos. Esto garantiza la compatibilidad con la mayoría de fuentes web modernas y fuentes de iconos disponibles en la actualidad.

¿Cómo puedo garantizar una tipografía coherente en distintos sistemas?

IronPDF incrusta fuentes web directamente en los archivos PDF generados, garantizando que su tipografía personalizada se muestre de forma coherente independientemente de las fuentes instaladas en el sistema del usuario. Esto lo hace ideal para mantener la coherencia de la marca en documentos distribuidos.

Curtis Chau
Curtis Chau
  Chatea con el equipo de ingeniería ahora
Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

Leer más
¿Listo para empezar?
Nuget Descargas 17,012,929 | Versión: 2025.12 recién lanzado