lelgenio/hello-fonts
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

init

Browse source
This commit is contained in:
lelgenio 2024-10-06 13:27:09 -03:00
commit 10f7485fea
17 changed files with 206 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
fonts/Authentic Claisha.ttf Normal file
View file

Binary file not shown.

BIN
fonts/BebasNeue-Regular.otf Normal file
View file

Binary file not shown.

BIN
fonts/Birds of Paradise © PERSONAL USE ONLY.ttf Normal file
View file

Binary file not shown.

BIN
fonts/Breathney Demo.ttf Normal file
View file

Binary file not shown.

BIN
fonts/Cream Beige.otf Normal file
View file

Binary file not shown.

BIN
fonts/DRAGON HUNTER.otf Normal file
View file

Binary file not shown.

BIN
fonts/Eracake.otf Normal file
View file

Binary file not shown.

BIN
fonts/Happy Beige.otf Normal file
View file

Binary file not shown.

BIN
fonts/Happy Selfie.otf Normal file
View file

Binary file not shown.

BIN
fonts/Mister Grape - Personal Use.otf Executable file
View file

Binary file not shown.

BIN
fonts/Muthiara demo version.otf Normal file
View file

Binary file not shown.

BIN
fonts/Quirk Chick.ttf Normal file
View file

Binary file not shown.

BIN
fonts/Sinera.otf Normal file
View file

Binary file not shown.

BIN
fonts/Starborn.otf Normal file
View file

Binary file not shown.

BIN
fonts/Vogue.ttf Normal file
View file

Binary file not shown.

BIN
fonts/coolvetica rg.otf Normal file
View file

Binary file not shown.

206
index.html Normal file
View file

@ -0,0 +1,206 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello fonts</title>
<style>
@font-face {
font-family: "Authentic Claisha";
src: url("fonts/Authentic Claisha.ttf");
}
@font-face {
font-family: "BebasNeue-Regular";
src: url("fonts/BebasNeue-Regular.otf");
}
@font-face {
font-family: "Birds of Paradise © PERSONAL USE ONLY";
src: url("fonts/Birds of Paradise © PERSONAL USE ONLY.ttf");
}
@font-face {
font-family: "Breathney Demo";
src: url("fonts/Breathney Demo.ttf");
}
@font-face {
font-family: "coolvetica rg";
src: url("fonts/coolvetica rg.otf");
}
@font-face {
font-family: "Cream Beige";
src: url("fonts/Cream Beige.otf");
}
@font-face {
font-family: "DRAGON HUNTER";
src: url("fonts/DRAGON HUNTER.otf");
}
@font-face {
font-family: "Eracake";
src: url("fonts/Eracake.otf");
}
@font-face {
font-family: "Happy Beige";
src: url("fonts/Happy Beige.otf");
}
@font-face {
font-family: "Happy Selfie";
src: url("fonts/Happy Selfie.otf");
}
@font-face {
font-family: "Mister Grape - Personal Use";
src: url("fonts/Mister Grape - Personal Use.otf");
}
@font-face {
font-family: "Muthiara demo version";
src: url("fonts/Muthiara demo version.otf");
}
@font-face {
font-family: "Quirk Chick";
src: url("fonts/Quirk Chick.ttf");
}
@font-face {
font-family: "Sinera";
src: url("fonts/Sinera.otf");
}
@font-face {
font-family: "Starborn";
src: url("fonts/Starborn.otf");
}
@font-face {
font-family: "Vogue";
src: url("fonts/Vogue.ttf");
}
.font-1 {
font-family: "Authentic Claisha";
}
.font-2 {
font-family: "BebasNeue-Regular";
}
.font-3 {
font-family: "Birds of Paradise © PERSONAL USE ONLY";
}
.font-4 {
font-family: "Breathney Demo";
}
.font-5 {
font-family: "coolvetica rg";
}
.font-6 {
font-family: "Cream Beige";
}
.font-7 {
font-family: "DRAGON HUNTER";
}
.font-8 {
font-family: "Eracake";
}
.font-9 {
font-family: "Happy Beige";
}
.font-10 {
font-family: "Happy Selfie";
}
.font-11 {
font-family: "Mister Grape - Personal Use";
}
.font-12 {
font-family: "Muthiara demo version";
}
.font-13 {
font-family: "Quirk Chick";
}
.font-14 {
font-family: "Sinera";
}
.font-15 {
font-family: "Starborn";
}
.font-16 {
font-family: "Vogue";
}
* {
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 5vw;
}
#hello-world {
display: flex;
align-items: center;
}
#hello-world > * {
display: inline-block;
width: 5vw;
}
</style>
</head>
<body>
<p id="hello-world">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span class="space"> </span>
<span>W</span>
<span>o</span>
<span>r</span>
<span>l</span>
<span>d</span>
</p>
<script>
const helloWorld = document.getElementById("hello-world");
const children = [...helloWorld.children];
const removeFont = (elem) => {
elem.classList.values().forEach((cls) => {
if (cls.match("font")) {
elem.classList.remove(cls);
}
});
};
const updateFont = (elem) => {
removeFont(elem);
const fontIdx = Math.ceil(Math.random() * 16);
elem.classList.add(`font-${fontIdx}`);
};
children.forEach((char) => {
updateFont(char);
});
setInterval(() => {
const random = Math.floor(Math.random() * children.length);
updateFont(children[random]);
}, 200);
</script>
</body>
</html>