ASP .NET Core 6 Razor pages: a dropdown to change a font family for whole site

Question

I've just created ASP .NET Core 6 Razor pages Web application from a template.
And I've added a dropdown containing font family names ( Arial, Tahoma, etc. ).
Howto dynamically change a font family for whole site when user selects any value from that dropdown?
Thank you in advance.

Answer 1

Hi @Alexey Leonovich ,

Howto dynamically change a font family for whole site when user selects any value from that dropdown?

You can use the DropDownList's change event, after the select value changes, you could change all elements's font-family property. Code like this:

    <select id="CurrentFontFamily" >  
       <option value="0">Choose a Font</option>  
       <option value="Times New Roman">Times New Roman</option>  
       <option value="Arial">Arial</option>  
    </select>  
<script>  
    $(function(){  
        $("#CurrentFontFamily").change(function(){  
            if($(this).val()!=0){  
                //find all elements and set the font-family  
                $('*').css("font-family", $(this).val());  
            }  
        });  
    });  
</script>  

You can add the above code in the Layout page. The result as below:

And in the above code, I directly populate the DropDownList, if you want to dynamically populate the DropDownList, after the document is ready, you can use JQuery Ajax to call the API method or Razor page handler to get the data and populate the DropDownList.

After select the font-family, as Bruce said, you can store it using cookie, or using the Web Storage API (such as localStorage or sessionStorage). Then, after navigation to another page or reload page, you can use JQuery to check whether the cookie or webstorage stored the selected font family, if the font family exist, you can set the DropDownList selected index and change the elements font family.

For example, we are using the session storage:

<script>  
    $(function(){  
        //check is current font family exist  
        if (sessionStorage.currentFontFamily) {  
          var family =  sessionStorage.currentFontFamily;  
          $('*').css("font-family", family); //change elements font family  
          $("#CurrentFontFamily").val(family); //change the dropdownlist select option  
        }  
        else{  
            $("#CurrentFontFamily").val("0");  
        }  

        $("#CurrentFontFamily").change(function(){  
            if($(this).val()!=0){  
                //find all elements and set the font-family  
                $('*').css("font-family", $(this).val());  
                sessionStorage.currentFontFamily = $(this).val(); //store the selected font family to the sessionstorage  
            }  
        });  
    });  
</script>  

The result is like this:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. 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.

Best regards,
Dillion

Answer 2

There are two steps

First is remembering the font between requests. A cookie is good for this.

Second is specifying the font in the html. This will depend on you markup. A common approach would to define a class name for each font/theme and append to the body tag in the razor layout page.