How do I retrieve a saved font family and use it on Label controls in a div?

Question

Hi, I have a JavaScript code that changes the font of elements in a div. I save this selected font into a database, such that whenever I access this div next time, it is the saved font that will apply to the labels. For example, if a user tries to design a document and the user sets the font family for the labels in that document during run time. The user then saves this font design, to be accessed any time or day. Whenever the user returns to the page, the saved font family will be seen in display, without having to redesign the document again. But when I retrieve this font from database to display on the labels, it does not work. Could it be that I don't have the links to all the fonts in my application head or in a folder to make reference to? Do I need to have all the fonts styles link in a folder in my application? Here is the HTML and Javascript to display and set the font family on labels

<div runat="server" id="GridParent">
        <div style="font-weight: 600;">
            <asp:Label ID="Label4" runat="server" Text="Company Name" Font-Size="12pt"></asp:Label>
        </div>
        <div>
            <asp:Label ID="Label7" runat="server" Font-Size="10pt" Text="Company address"></asp:Label>
        </div>
        <div>
            <asp:Label ID="Label8" runat="server" Text="Phone Number" Font-Size="10pt"></asp:Label>
        </div>
        <div>
            <asp:Label ID="Label9" runat="server" Font-Size="10pt" Text="Email address"></asp:Label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <asp:Label runat="server">Choose Font</asp:Label>
                <div class="input-group">
                    <input type="text" runat="server" class="fonts form-control" id="Text1" />
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
    <script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function selectFontAndApplyToEle(fontName, callback) {
                $('div.font-select').find('.fs-results li').removeClass('active');
                var dropEle = $('div.font-select').find('.fs-drop');
                var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
                dropEle.addClass('fs-drop-op');
                var posFont = fontToSelect.offset().top
                var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
                $('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
                fontToSelect.addClass('active').trigger('click');
                setTimeout(function () {
                    $('div.font-select a div').trigger('click');
                    dropEle.removeClass('fs-drop-op');
                    callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
                }, 500);
            }
            $(function () {
                $('input.fonts').fontselect({
                    style: 'font-select',
                    placeholder: 'Select a font',
                    lookahead: 2
                }).on('change', function (e) {
                    var fontFamily = $(this).val().replace(/\+/g, ' ');
                    $('#GridParent').css('font-family', fontFamily);
                });
                selectFontAndApplyToEle('Anton', function (fontFamily) {
                    $('#GridParent').css('font-family', fontFamily);
                    setTimeout(function () {
                        selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
                            $('#GridParent').css('font-family', fontFamily);
                        });
                    }, 1000);
                });
            });
        });
    </script>

Answer 1

Hi @Donald Symmons,

But when I retrieve this font from database to display on the labels, it does not work.

You will see this part of the jquery.fontselect.js file, which means that the fonts you reference come from online resources, therefore you cannot correctly set the control's font without referencing the resource. In this case, for a specific font resource, you can first reference the resource and then set the font of the Label control, something like this:

Taking Anton as an example, add it as a parameter after the url to reference the corresponding resource.

https://fonts.googleapis.com/css?family=<font-family you stored>

    protected void Page_Load(object sender, EventArgs e)
    {
        Page.Header.Controls.Add(
new System.Web.UI.LiteralControl("<link rel=\"stylesheet\" type=\"text/css\" href=\" https://fonts.googleapis.com/css?family=Anton \" />"));
        label4.Attributes.Add("style", "font-family: 'Anton';");
    }

Result:

Best regards,

Xudong Peng

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.