Advertisement
punkwasp

font selector code javascript

Jun 19th, 2023
441
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 1.38 KB | Source Code | 0 0
  1. /*
  2. The Javascript portion of code I made in order to make a working font selector on my Neocities website, you will need the HTML code for the font selector form as well which will also be on my Pastebin profile, in a folder called "font selector code html and javascript". My code works by storing the user's selection in their browser selection and checking for it when they load the website, so if you have the code below somewhere on each webpage, it will work across multiple site pages as well. If you would like to see the code in action, my website is punkwasp.neocities.org. This code is completely free to use, no credit required. You could also tweak it to edit things besides font family, and it will work with custom fonts you've uploaded to the site as long as you've done the work of setting them up in your CSS file.
  3. */
  4.  
  5. var bodyElem = document.querySelector('body');
  6.  
  7. var fontForm = document.getElementById('fontFamily');
  8.  
  9. if(!localStorage.getItem('fontFamily')) {
  10.   populateStorage();
  11. } else {
  12.   setStyles();
  13. }
  14.  
  15. function populateStorage() {
  16.   localStorage.setItem('fontFamily', document.getElementById('fontFamily').value);
  17.  
  18.   setStyles();
  19. }
  20.  
  21. function setStyles() {
  22.   var currentFont = localStorage.getItem('fontFamily');
  23.  
  24.   document.getElementById('fontFamily').value = currentFont;
  25.  
  26.   bodyElem.style.fontFamily = currentFont;
  27. }
  28.  
  29. fontForm.onchange = populateStorage;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement