How to implement a custom font picker using JavaScript?
13/03/2024
•
5
min
Creating a custom font picker can be divided into several steps which involve HTML, CSS, and JavaScript.
Step 1: Preparation:
Ensure you have the proper fonts available. If you do not, you can download them from sources like Google Fonts. Just make sure to link them in your HTML file.
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Step 2: Create the HTML layout:
<!DOCTYPE html>
<html>
<head>
<title>Font Picker</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="font-family: 'Open Sans', sans-serif;">Custom Font Picker</h1>
<div>
<label for="fontPicker" >Select Font:</label>
<select id="fontPicker">
<option value="'Open Sans', sans-serif;">Open Sans</option>
<option value="'Roboto', sans-serif;">Roboto</option>
</select>
</div>
<p id="text">This is sample text</p>
</body>
</html>
In this HTML file, I included two font styles from Google Fonts for the custom font selector. You can add more options in the select tag for more fonts.
Step 3: Add the CSS part:
body {
background-color: #ddd8d8;
}
h1 {
text-align: center;
}
Step 4: JavaScript logic:
We then add the JavaScript logic to change the font when the select option changes in the font picker.
<!DOCTYPE html>
<html>
<head>
<title>Font Picker</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap" rel="stylesheet">
<style>
body {
background-color: #ddd8d8;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1 style="font-family: 'Open Sans', sans-serif;">Custom Font Picker</h1>
<div>
<label for="fontPicker" >Select Font:</label>
<select id="fontPicker">
<option value="'Open Sans', sans-serif;">Open Sans</option>
<option value="'Roboto', sans-serif;">Roboto</option>
</select>
</div>
<p id="text">This is sample text</p>
<script>
const fontPicker = document.getElementById("fontPicker");
const text = document.getElementById("text");
fontPicker.addEventListener("change", function() {
text.style.fontFamily = fontPicker.value;
});
</script>
</body>
</html>
This JavaScript section grabs the select element and paragraph from the DOM and adds an event listener to the select element. When the select option changes, the function in the event listener grabs the value of the selected option and assigns it as the font family for the text paragraph.
As a result, when you select a new font from the dropdown, the new font is applied to the sample text. You can use this to apply different font styles to different elements in your webpage.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.