Custom Fonts

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 GcPdfViewer, 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:

Register the new or custom fonts on the web page
Configure SupportAPI to associate the client font names with the server fonts.

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:

// 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

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

Using ClientFonts Setting

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

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

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:

// 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' }
];