@lablnet/fontpicker
Version:
The JavaScript fontpicker plugin
76 lines (66 loc) • 1.96 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Muhammad Umer Farooq" />
<title>Font Picker</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f0f2f5 ;
padding: 15px;
}
button {
padding: 12px;
color: #fff;
background-color: #000;
margin: 12px;
}
p {
padding: 6px;
border: 1px solid transparent;
margin: 4px;
font-size: 19px;
}
footer {
bottom: 0;
width: 100%;
background-color: #fff;
text-align: center;
position: fixed;
padding: 12px;
}
@media screen and (max-width: 900px) {
footer {
position: relative;
}
}
</style>
</head>
<body>
<button id="picker">Font Picker</button>
<p id="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, deleniti laboriosam molestias alias quia
animi, odio itaque dolores ut quasi mollitia voluptatibus deserunt neque possimus! Modi quam sunt laboriosam
sed.
</p>
<footer>
<h4>
Made with 💕 by Umer <a href="https://github.com/Lablnet/TicTacToe">Source</a>
</h4>
</footer>
</body>
<script src="public/bundle.js" charset="utf-8"></script>
<script>
let picker = document.getElementById("picker");
fontpicker(picker, (data) => {
let paragraph = document.getElementById("paragraph");
paragraph.style.fontFamily = data.fontFamily;
console.log("selected", data)
})
</script>
</html>