Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use @font-face via C#

See original GitHub issue

I see the example for fonts here: https://blazorstyled.io/fonts

What I need is to dynamically set this as a variable and not in a style tag:

    @font-face {
        font-family: 'Indie Flower';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v10/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
        font-family: {'Indie Flower'};

For my web page, the user has a dropdown to select 1 of 940 Google fonts. When the font selection changes, I set a variable to the appropriate value like this:

<div style="@myFont">
    Hello
</div>

code{
        public string myFont { get; set; }
        private string fontFamily { get; set; }
        private string fontStyle{ get; set; }
        private string fontWeight { get; set; }
        private string fontDisplay { get; set; }
        private string fontUrl { get; set; }
        private string fontFormat { get; set; }
        private string fontUnicodeRange { get; set; }

        public void FontOnChange(UIChangeEventArgs args)
        {
            fontFamily = "Indie Flower";
            fontStyle = "normal";
            fontWeight = "400";
            fontDisplay = "swap";
            fontUrl = "https://fonts.gstatic.com/s/indieflower/v10/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2";
            fontFormat = "woff2";
            fontUnicodeRange = "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD";

            myFont = $@"    @font-face {{
        font-family: '{fontFamily}';
        font-style: {fontStyle};
        font-weight: {fontWeight};
        font-display: {fontDisplay};
        src: local('{fontFamily}'), local('{fontFamily.Replace(" ", "")}'), url({fontUrl}) format('{fontFormat}');
        unicode-range: {fontUnicodeRange};
    }}
        font-family: {fontFamily};";
        }
}

Is this possible but using BlazorStyled? It’s not possible with plan Blazor.