How do I make sure the font changes across all HTML pages?

Question

I have a website made of 4 separate HTML files . My CSS and Javascript are in seperate files called "styles.css" and "homepage.js" respectively. I have a navigation bar for all my html pages in a separate html file called "nav.html" which is included using w3-include-html . In the navigation bar, I have a dropdown to change the font of the entire website. But once the font is changed, and a link to a different page is clicked, the font changes back to the default. How to make sure the font does not change to the default?

nav.html

<nav class="navbar" role="navigation">
    <div class="navbar-header w-100">
        <h3 class="navbar-brand">The Adventures of Sherlock Holmes</h3>
        <div class="navbar-toggle float-right" type="button" data-toggle="collapse" data-target="#nav-content">
            <div class="icon-bar"></div>
            <div class="icon-bar"></div>
            <div class="icon-bar"></div>
        </div>
        <select class="form-select" id="font-dropdown" aria-label="Dropdown for Font Change">
            <option class="font-op" value="Times New Roman" selected>Times New Roman</option>
            <option class="font-op" value="Arial">Arial</option>
            <option class="font-op" value="Comic Sans MS">Comic Sans MS</option>
        </select>
    </div>

    <div class="collapse navbar-collapse" id="nav-content">
      <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="blue-carbuncle.html">The Adventure of the Blue Carbuncle</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="engineer-thumb.html">The Adventure of the Engineer’s Thumb</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="beryl-coronet.html">The Adventure of the Beryl Coronet</a>
        </li>
      </ul>
    </div>
</nav>

Javascript

function navFunc() {
    let links = document.querySelectorAll('.nav-link');
    for (let i = 0; i < links.length; i++) {
        if (links[i].innerHTML == document.title) {
            links[i].style.fontStyle = 'italic';
        }
    }
    let options = document.querySelectorAll('.font-op');
    for (let i = 0; i < options.length; i++) {
        options[i].style.setProperty('font-family', options[i].value, 'important');
    }
    document.querySelector('#font-dropdown').onchange = function () {
        document.body.style.fontFamily = this.value;
    };
}

CSS

body {
    font-family: "Times New Roman";
    background: #f7f7f7;
    color: black;
}

.navbar {
    background: black;
    color: white;
    font-size: 1.25rem;
}

.navbar-brand {
    margin: 0;
    font-weight: bold;
}

.navbar-brand, .nav-link, .nav-link:hover {
    color: inherit;
}

.nav-link:hover {
    text-decoration: underline;
}

.icon-bar {
    width: 1.875rem;
    height: 0.1875rem;
    background: white;
    margin: 0.375rem;
}

#font-dropdown {
    padding: 0.1875rem;
    margin: 0.25rem 0.5rem;
    float: right;
}

HTML

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
        <script src="https://www.w3schools.com/lib/w3data.js"></script>
        <script src="homepage.js"></script>
        <link href="styles.css" rel="stylesheet">
        <title>Home</title>
    </head>
    <body>
        <div w3-include-html="nav.html"></div>
        <script>w3IncludeHTML(navFunc);</script>

Answer 1

I'd store the font setting choosen by the user somewhere and then read and set it again, everytime a page is loaded.

Something useful for the scope might be the Web Storage API .

Excerpt from MDN examples:

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var currentImage = localStorage.getItem('image');

  document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font').value = currentFont;
  document.getElementById('image').value = currentImage;

  htmlElem.style.backgroundColor = '#' + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute('src', currentImage);
}

You can store the font value in the session variable, then retrieve it and assign back to the.body class on page load.

How do I make sure the font changes across all HTML pages?

Question

nav.html

Javascript

CSS

HTML

1 answers

solution1
1 ACCPTED 2021-04-17 09:39:06

How do I make sure the font changes across all HTML pages?

Question

nav.html

Javascript

CSS

HTML

1 answers

solution1 1 ACCPTED 2021-04-17 09:39:06

solution1
1 ACCPTED 2021-04-17 09:39:06