Fixing Missing Fonts in SkiaSharp on Linux

When working with cross-platform libraries like SkiaSharp for rendering graphics, you may encounter font-related issues, especially when deploying to Linux environments. A common issue is that text rendering works fine on Windows but appears missing or incorrect on Linux. This blog will walk you through how to fix missing fonts in SkiaSharp when deployed to Linux.

Why Does This Happen?

The issue arises because Linux systems often don’t come pre-installed with the same fonts that are available on Windows. When using SKTypeface.Default, SkiaSharp tries to load the default system font, but this may not exist on Linux, leading to missing or invisible text.

Solutions to Fix the Font Issue

1. Embed Custom Fonts

The most reliable solution is to include a custom font with your project so it works consistently across different platforms.

Steps:

1. Add the font file (e.g., .ttf) to your project. Make sure its Build Action is set to Copy if newer or Copy always.
2. Update your code to load the custom font like this:

private SKTypeface LoadCustomFont()
{
    var fontPath = Path.Combine(AppContext.BaseDirectory, "Fonts", "your-font-file.ttf");
    return SKTypeface.FromFile(fontPath);
}

3. Use the loaded font in your SkiaSharp rendering code:

var typeface = LoadCustomFont();
var paint = new SKPaint
{
    Typeface = typeface,
    TextSize = 24,
    Color = SKColors.Black,
};
canvas.DrawText("Sample Text", x, y, paint);

By embedding the font, you ensure it is available regardless of where your app is running.

2. Install Fonts on the Linux System

If you prefer using system fonts, you can install common fonts on your Linux machine. Here’s how to install Microsoft fonts and other popular fonts on Ubuntu or Debian-based systems:

• To install Microsoft fonts:

sudo apt-get install ttf-mscorefonts-installer

• To install popular open-source fonts like DejaVu:

sudo apt-get install fonts-dejavu

After installing, your code can use these fonts in the same way:

var paint = new SKPaint
{
    Typeface = SKTypeface.FromFamilyName("DejaVu Sans"),
    TextSize = 24,
    Color = SKColors.Black,
};

3. Use Generic Font Family Names

Instead of specifying platform-specific fonts, you can use generic font family names. SkiaSharp may automatically pick a font that exists on the system.

var paint = new SKPaint
{
    Typeface = SKTypeface.FromFamilyName("sans-serif"), // Generic font family
    TextSize = 24,
    Color = SKColors.Black,
};

This approach provides a level of flexibility as it allows SkiaSharp to pick an available font on the system.

Debugging Font Issues

If you’re still having trouble, you can debug by checking whether the SKTypeface is loading correctly:

var typeface = SKTypeface.FromFamilyName("DejaVu Sans");
if (typeface == null || string.IsNullOrEmpty(typeface.FamilyName))
{
    throw new Exception("Font could not be loaded!");
}

This helps you ensure that your font is being loaded correctly and lets you catch potential issues early.

Conclusion

Font issues on Linux with SkiaSharp can be frustrating, but the solutions are straightforward. By either embedding custom fonts or installing fonts on the system, you can ensure that your app renders text correctly across platforms. With the simple steps outlined above, you can make your SkiaSharp applications look great no matter where they’re deployed!