Entrance Events! Chat Gallery Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
June 06, 2025 - @157.40 (what is this?)
Activity rating: Three Stars Posts & Arts: 41/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: :eyes: ~ Inconvenience is counterculture ~ :eyes: Super News: Upload a banner!

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Trying to make a dropdown menu for changing between font families

 « previous next »
Pages: [1] Print
Author Topic: Trying to make a dropdown menu for changing between font families  (Read 973 times)
asterhalloween
Casual Poster ⚓︎
*


the beauty of experiencing the world

⛺︎ My Room
SpaceHey: Friend Me!
iMood: mythicalwaters

View Profile WWW

First 1000 Members!Joined 2023!
« on: December 01, 2023 @666.27 »
okay so... I am trying to make a settings page to change various aspects of my website, mainly appearance wise. I've already gotten a toggle working for theme selection (dark/light mode) but I also want to have a dropdown menu for selecting between different font families for the entire website (and hopefully custom cursors and eventually even cursor trails too, though that's for a different day O_o)
SO basically, I've got the actual dropdown menu in place with values and id's and such, but I have pretty much no idea what to do for the JavaScript in regard to setting the variables to the selected values.
I'm planning on having the font-family property use a var(--font), but unlike the theme management (linked above) I want it to only be a lone variable controlled by the selected dropdown value (and remembered using localStorage, of course) rather than a class that sets the variables, if possible. (I don't particularly mind if I need to make classes for each font variable if it's necessary, but if there is a way to do it without that I would prefer it)
Apologies if this topic is similar to others, I'm still fairly new to using forums and couldn't find an answer to my question in here or by looking it up ^_^"
Logged
:4u: Love makes the world go round! :transport:
TheFrugalGamer
Sr. Member ⚓︎
****


⛺︎ My Room
Itch.io: My Games
RSS: RSS

View Profile WWW

Great Posts PacmanFirst 1000 Members!Pocket Icelogist!Joined 2022!
« Reply #1 on: December 01, 2023 @896.24 »
I believe you can just target the body tag and it should change everything that you haven't already set explicitly. See this JS Fiddle here:

https://jsfiddle.net/6uqLm3za/

I'm not sure how you'd save it from page to page though since I've never actually had to do that before.

HTML:
Code
<html>

<body>
  <p>
    This text should change once you've changed the dropdown below.
  </p>
  
  <p>
    Change font here:
  </p>

  <select id="fontToggle" onChange="changeFont()">
    <option value="0" selected="selected">None</option>
    <option value="courier">Courier</option>
    <option value="comic">Comic Sans</option>
    <option value="roman">Times New Roman</option>
  </select>
</body>

</html>

Code
function changeFont(){
var drop = document.getElementById("fontToggle");
var fchoice = drop.options[drop.selectedIndex].value;
var family = "";

switch(fchoice){
	case "courier":
  	family = "Courier";
    break;
	case "comic":
  	family = "Comic Sans MS";
    break;
	case "roman":
  	family = "Times New Roman";
    break;
}

console.log(family);
document.body.style.fontFamily = family;
}
Logged
| Find me on the Fediverse
Pages: [1] Print 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi