Display webpage when a user picks a font from a dropdown menu using jQuery

I am looking to create a code that will display a list of fonts for the user to choose from. Once a font is selected, the content on the page will be displayed using that particular font face. Unfortunately, I'm not sure how to achieve this yet :(

Answer №1

My suggestion for organizing your CSS is as follows:

body.arial {font-family:arial;}
body.tahoma {font-family:tahoma;}

Utilize JavaScript to dynamically update the body's class based on user-selected font preferences.

$(document.body)[0].className=SelectedFont;

Answer №2

$(".fontChanger").on("change", function(){
    $("*").css("font-family", this.value);
});

The font changer feature works using a dropdown menu like the one below

<select class='fontChanger'>
   <option value='Roboto'>Roboto</option>
    ......
</select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying/Concealing specific choices using jQuery

Greetings! I am in need of some assistance with my coding query. I have been working on a piece of code where selecting 'x' should reveal another dropdown, which seems to be functioning correctly. However, if I navigate three dropdowns deep and t ...

It appears that Javascript variables are behaving in a static manner

I am currently building a PHP website with a registration page for users. I am implementing the LOOPJ jQuery Autocomplete script from to enable users to select their country easily. In this process, I encountered an issue where the value of another field ...

Need help making switch buttons in react-native?

Using the library found at this link has been quite successful on my iPhone, but it does not display properly on Android. It appears as shown here. ...

Creating dynamic input forms with React and Formik

Looking to dynamically remove an input field and its corresponding key with value from Formik using the useFormik hook. The issue arises when the input field is removed, but the key and value remain in useFormik until the button is pressed again. How can I ...

Issue with onClick event not firing when using option tag in React

onClick event seems to have an issue with the <option> tag. How can we successfully use the onClick event with the select option tags while assigning different parameters to each option? async function setLanguage(language) { ...

Having trouble bringing in components to my pages in ReactJS

There seems to be an issue preventing me from importing the components onto the page, resulting in this error: ERROR in ./src/pages/Home.jsx 4:0-37 Module not found: Error: Can't resolve './components/Card' in '/home/c4p1/blog/src/pages ...

Error encountered: TypeError: __webpack_require__.t is not a function - Issue appears only on live server, while localhost runs without any problem

I set up an e-commerce site that runs smoothly on localhost. However, when I deploy it to a live server, an error appears. Interestingly, the error disappears after reloading the page. Here is the code snippet: import React, { useEffect, useState } from & ...

Illustration of CSS schema

I need help aligning the horizontal pictures with their corresponding names below <div class="imgages"> <img src="rock.png"/><p>Rock</p> <img src="paper.png"/><p>Paper</p> <img src="scissors.png" /><p&g ...

Using jQuery to interact with a servlet that has multiple non-unique URL parameters: A step-by-step guide

My servlet requires a specific call format like http://localhost:8080?a=1&a=3&a=2&b=5, with multiple parameters sharing the same name, such as 'a' in this case. How can I construct a query string for my servlet that includes duplicate ...

Replace the transformation matrix of a three.js object/mesh entirely

Creating a new object in three.js In order to create a three.js mesh object, follow these steps: var geometry = new THREE.BufferGeometry(); var standardMaterial = new THREE.MeshStandardMaterial( {/* inputs */ } ); var mesh = new THREE.Mesh( ...

two adjacent DIV elements with matching heights

Currently, I am in the process of developing an internal web page with a wrapper DIV structure based on recommendations from an online tutorial. Within this wrapper, there are different sections including a header, mainnav, content, sidenav, and footer. Th ...

Decrease the gap between rows in CSS Grid

I'm struggling to minimize the space between the rows. I've attempted adjusting margins and paddings to 0, but nothing seems to be working effectively. Displaying desktop view on the left and mobile view on the right side. https://i.sstatic.net ...

Looking for a method to quickly send an email via "mailto" in CSS (or any web development language) without the need to open Outlook or Apple Mail?

I'm currently in the process of developing my own website which includes a contact form with a message box. However, when I click submit or send, it redirects me to my Outlook email where all the entered data is collected. I then have to click send ag ...

How to attach a listener to an ASP.NET control with jQuery

Looking for a way to detect user interaction with a checkbook list, text box, or drop down list, and style other elements based on the values present. Is there a way to achieve this using jQuery? ...

What is the best way to send an Angularjs variable to an id within an HTML input?

Currently, I am using angularjs ng-repeat to add checkboxes in the following manner: <div class="checkbox-circle" ng-repeat="t in tenders"> <input type="checkbox" checklist-model="contratacion.select" checklist-value="t.id" id="{{t.id}}"> ...

How to retrieve values from a nested array in a Next.js application

I am diving into the world of nextjs and apollo for the first time, and I am currently facing a challenge with using .map to loop through database results. Below is the code for my component: import { gql, useQuery } from "@apollo/client" import ...

Obtaining all tweets from a specified username using PHP

After collecting 3200 tweets using API v1.1, I attempted to retrieve all tweets by running a cron job as a background process. However, this method did not increase the total number of tweets. I am seeking suggestions on how to obtain all tweets either th ...

Tips for creating a window closing event handler in Angular 2

Can someone guide me on how to create a window closing event handler in Angular 2, specifically for closing and not refreshing the page? I am unable to use window.onBeforeunLoad(); method. ...

Is there a way to adjust the size of a video thumbnail to fit within a

Currently, I am developing a system to remotely control home electrical devices via the web. However, I am facing an issue with fitting camera images properly within their container. https://i.sstatic.net/Yct2d.png How can I ensure that the video thumbna ...

Why was $(elem) created?

Can someone help me understand the usage and purpose of $(elem) in JavaScript? I am facing an issue with my JavaScript function where I have three forms on a page, each with fields that can have similar classes. When I try to validate one form, even if it ...