Hi Fun,
I'll provide you with the basic unstyled workflow (no css styling) - I assume you can apply that?
Below (scroll down) is the html code for the text input, the select list and a <div> with the class of 'fontStyle', where the text will be 'printed' AFTER a typeface has been selected from the list.
Where it says value="fonts/nameOfFont.css" - nameOfFont.css are seperate css stylesheets, 1 for each typeface. Name the css stylesheets with the name of the typeface NOT 'nameOfFonts' that is just some place-holder example text. Also store the css stylesheets in a folder named 'fonts' as can be seen in the value="fonts/nameOfFont.css"
Give the option tag text the 'Name of the Font', so the user can see the name of the font they are selecting.
Now as to what goes in each of your font css stylesheets. Assuming you have found some appropriate Google Fonts, choose the 'import' option to access the Google fonts in your webpage and paste the import link in your css stylesheet. Below is the import option url to a font named Taviraj from the Google Fonts website
@Import url('https://fonts.googleapis.com/css2?family=Taviraj:wght@500&display=swap');
Right after the above paste the below in your css stylesheet, this will target the 'fontStyle' div into which the typeface option, chosen from the select option, will be 'printed'.
.fontStyle {
font-family: 'Taviraj', serif;
}
Repeat the steps for each typface, creating individual css stylesheets for each one.
Html code:
<div class="wrapper">
<p>
<label for="inputText">1. Type in some text</label><br>
<input class="inputText" id="inputText" type="text">
</p>
<p>
<label for="selectFont">2. Select Font</label><br>
<select id="selectFont" class="selectFont" onchange="changeFont(this.value)">
<option value="fonts/nameOfFont.css" selected>Name of the Font </option>
<option value="fonts/nameOfFont.css">Name of the Font</option>
<option value="fonts/nameOfFont.css">Name of the Font</option>
<option value="fonts/nameOfFont.css">Name of the Font</option>
</select>
</p>
<div class="fontStyle"></div>
</div>
<!-- end wrapper -->
Next add a stylesheet link to the page, to handle the swapping of the fonts/stylesheets - I'm assuming you know how to add a basic stylesheet link to the page?
Give it an id of 'selectCss' as the example link below and make the href link the link to your css stylesheet, in the fonts folder, which is associated with the first font in the select option list:
<link id="selectCss" href="fonts/nameOfFont.css" rel="stylesheet" type="text/css">
Lastly add the javascript below to the end of your page, directly before the closing </body> tag:
<script>
// get association to the text field with the class 'inputText'
const inputText = document.querySelector('.inputText');
//create a function for when the select list changes
function changeFont(fontSelected) {
// get association to the <div> with the class 'fontStyle'
const fontStyle = document.querySelector('.fontStyle');
// print the value of the 'inputText' field to the div with the class 'fontStyle'
fontStyle.innerHTML = `<h2>${inputText.value}</h2>`;
// get association to css stylesheet with the id 'selectCss' and set its href link to the value of the select option field selected
document.getElementById("selectCss").setAttribute("href", fontSelected);
}
</script>
That should be it!
12
Replies
AdChoices