This library add interop support for Local Font Access API in Blazor WebAssembly.
See Demo project.
The library is fully XML documented. All the methods and properties names follow the original Javascript API.
Install this library through Blazor.LocalFont:
dotnet add package Blazor.LocalFont
The project requires .NET 7.0 or later.
Call AddLocalFont
method to register ILocalFontService
into your DI container.
builder.Services
.AddLocalFont();
From your pages or services, you can inject an instance of ILocalFontService
to use the library.
@inject ILocalFontService LFonts;
Check if the browser supports the Local Font Access API.
if (await LFonts.IsSupportedAsync())
{
// It is supported
}
Get the current permission status for local-fonts
permission. See Javascript Permissions API.
var permission = await LFonts.GetPermissionAsync();
// permission is one of the following values: "granted", "denied", "prompt"
If the permission is prompt
, you can request the permission with one of the query methods.
You can request a list of local fonts with these methods:
Task<IEnumerable<FontData>> QueryLocalFontsAsync();
Task<IEnumerable<FontData>> QueryLocalFontsAsync(IEnumerable<string>? postscriptNames);
Task<IEnumerable<FontData>> QueryLocalFontsAsync(QueryLocalFontsOptions? options);
Task<IFontDataRefCollection> QueryLocalFontsRefAsync();
Task<IFontDataRefCollection> QueryLocalFontsRefAsync(IEnumerable<string>? postscriptNames);
Task<IFontDataRefCollection> QueryLocalFontsRefAsync(QueryLocalFontsOptions? options);
postscriptNames
is a list of PostScript names of the fonts you want to query. If you don't specify any, all the fonts will be returned.
The difference between QueryLocalFontsAsync
and QueryLocalFontsRefAsync
is that one returns the serialized information only (and no further operation is possible), while the other returns a reference to the font data that can be used to load the font data. See Font Data JS Reference types below for more information.
Example
// Get the font from backend C#
var fonts = await LFonts.QueryLocalFontsAsync();
firstFont = fonts.First();
<!-- Use it in HTML -->
<span style="font-family: @(firstFont.Family);">
The quick brown fox jumps over the lazy dog
</span>
If you use QueryLocalFontsRefAsync
method, you will receive an instance of IFontDataRefCollection
instead of FontData
.
-
IFontDataRefCollection
: A reference to a Javascript Array of FontData for further operation.-
Task<long> GetLengthAsync()
: Get the total number of items (length) in this array. -
Task<IFontDataRef> GetItemAsync(long index)
: Get a single FontData reference at the specified index.
-
-
IFontDataRef
: A reference to a JavascriptFontData
for further operation.-
Task<FontData> GetFontDataAsync()
: Get the information of thisFontData
. -
Task<Stream> GetFontFileAsync(long maxAllowedSize = DefaultMaxAllowedSize)
: Get the raw binary data of this font. The default max size is 10MB, you will receive an error if a font is larger than this size.
-
Example
This example request a list of fonts and then load its binary data to determine the font type according to the example from MDN.
// Get font list
fontRefs = await LFonts.QueryLocalFontsRefAsync();
fontRefsLen = await fontRefs.GetLengthAsync();
// Read data from the first font
var font = await fontRefs.GetItemAsync(0);
var data = await font.GetFontDataAsync();
using var stream = await font.GetFontFileAsync();
var buffer = new byte[4];
var count = await stream.ReadAsync(buffer, 0, 4);
if (count != 4)
{
currFontType = "Unknown";
}
else
{
var sfntVersion = System.Text.Encoding.UTF8.GetString(buffer);
switch (sfntVersion)
{
case "\x00\x01\x00\x00":
case "true":
case "typ1":
currFontType = "truetype";
break;
case "OTTO":
currFontType = "cff";
break;
}
}