Document Solutions for PDF
Document Solutions PDF Viewer Overview / Edit PDF / Editors / Custom Fonts
In This Topic
    Custom Fonts
    In This Topic

    Sometimes you need custom fonts to use your creativity to create or edit a PDF document, which is not possible with the default fonts. With DsPdfViewer, you can add and use a list of new or custom fonts using editorDefaults.fontNames option.

    To use the editorDefaults.fontNames option, you must meet the following pre-requisites:

    The following sections will guide you on the same:

    Register New or Custom Fonts

    Refer to the following example code to register two fonts using CSS:

    Copy Code 
    // Define custom fonts.
<link rel="preload" href="budmo_jiggler.ttf" as="font" type="truetype" crossorigin>
<link rel="preload" href="FantaisieArtistique.ttf" as="font" type="truetype" crossorigin>
<style>
    @font-face {
        font-family: BudmoJiggler-Regular;
        src: url(/documents-api-pdfviewer/demos/product-bundles/assets/fonts/budmo_jiggler.ttf)  format('truetype');
    }
    @font-face {
        font-family: FantaisieArtistique;
        src: url(/documents-api-pdfviewer/demos/product-bundles/assets/fonts/FantaisieArtistique.ttf)  format('truetype');
    }
</style>

    Configure SupportAPI

    DsPdfViewer provides three different methods for associating client-side font names with server-side fonts:

    Using ClientFonts Setting

    Copy Code 
    public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll);
    GcPdfViewerHub.Configure(app);
    GcPdfViewerController.Settings.VerifyToken += VerifyAuthToken;
    GcPdfViewerController.Settings.Sign += OnSign;

    // The ClientFonts property holds font mappings associated with their respective client names.
    GcPdfViewerController.Settings.ClientFonts.Add("BudmoJiggler-Regular", Font.FromFile("budmo_jiggler.ttf"));
    GcPdfViewerController.Settings.ClientFonts.Add("FantaisieArtistique", Font.FromFile("FantaisieArtistique.ttf"));
    GcPdfViewerController.Settings.ClientFonts.Add("Yu Gothic UI", Font.FromFile("yu_gothic_ui.ttf"));
}

    Using DocumentInitialized Event and FontCollection Property

    Copy Code 
    public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll);
    GcPdfViewerHub.Configure(app);
    GcPdfViewerController.Settings.VerifyToken += VerifyAuthToken;
    GcPdfViewerController.Settings.Sign += OnSign;
    GcPdfViewerController.Settings.DocumentInitialized += OnDocumentInitialized;
}

private void OnDocumentInitialized(object sender, DocumentInitializedEventArgs e)
{
    // Resolve the "FantaisieArtistique" font using the GcPdfDocument's FontCollection property.
    var doc = e.Document;
    
    // Create a FontCollection instance.
    FontCollection fc = new FontCollection();
    
    // Get the font file using RegisterFont method.
    string projectRootPath = HttpContext.Current.Server.MapPath("~");
    string fontPath = Path.Combine(projectRootPath, "assets/FantaisieArtistique.ttf");
    fc.RegisterFont(fontPath);
    
    // Allow the SupportApi to find the specified fonts in the font collection.
    doc.FontCollection = fc;

}

    Using ResolveFont Event for Font Resolution

    Copy Code 
    public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll);
    GcPdfViewerHub.Configure(app);
    GcPdfViewerController.Settings.VerifyToken += VerifyAuthToken;
    GcPdfViewerController.Settings.Sign += OnSign;
    GcPdfViewerController.Settings.ResolveFont += OnResolveFont;
}

private void OnResolveFont(object sender, ResolveFontEventArgs e)
{
    // Utilize the ResolvedFont event argument property to resolve the "BudmoJiggler-Regular" font.
    string projectRootPath = HttpContext.Current.Server.MapPath("~");
    if (e.FontName == "BudmoJiggler-Regular")
    {
        string fontPath = Path.Combine(projectRootPath, "assets/budmo_jiggler.ttf");
        e.ResolvedFont = Font.FromFile(fontPath);
    }
}

    Setting Custom Font

    After setting up the pre-requisites as described above, set the custom font using the editorDefaults.fontNames option and apply it to a PDF as described below:

    Copy Code 
    // Set editor defaults for free text annotation.
viewer.options.editorDefaults.freeTextAnnotation = { fontName: 'FantaisieArtistique', borderStyle: { width: 0 } };

// Add font names.
viewer.options.editorDefaults.fontNames = [

        { name: 'Disco font', value: 'BudmoJiggler-Regular' },
        { name: 'Fantaisie font', value: 'FantaisieArtistique' }
    ];