Skip to content

Instantly share code, notes, and snippets.

@d0ruk
Last active November 28, 2023 11:04
Show Gist options
  • Save d0ruk/88319765ebc7aa6490094611e1a35e0f to your computer and use it in GitHub Desktop.
Save d0ruk/88319765ebc7aa6490094611e1a35e0f to your computer and use it in GitHub Desktop.

Apply any one of 998 Google fonts on a text.

* {
box-sizing: border-box;
}
html {
font-size: 12px;
}
body {
background-color: #eee;
}
#root {
margin: 0 auto;
margin-top: 7rem;
padding: 3rem;
font-size: 4rem;
max-width: 75vw;
color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
font-weight: bold;
/* letter-spacing: 1rem; */
/* line-height: 5rem; */
}
#root:hover {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
#families {
font-size: 1.5rem;
padding: 0.3rem;
}
/* https://stackoverflow.com/a/29806043 */
#families:required:invalid {
color: rgba(0, 0, 0, 0.5);
}
#families option[value=""][disabled] {
display: none;
}
#families option {
color: black;
}
#pick-font-color,
#pick-bg-color {
display: inline-block;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaWQ9IlNWR1Jvb3QiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUwLjAgNTAuMCIKICAgaGVpZ2h0PSI1MC4wcHgiCiAgIHdpZHRoPSI1MC4wcHgiCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMCAoNDAzNWE0ZmI0OSwgMjAyMC0wNS0wMSkiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImNvbG9yLXBpY2tlci5zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMxOTk3IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpbmtzY2FwZTpzbmFwLWdyaWRzPSJmYWxzZSIKICAgICBpZD0iYmFzZSIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp6b29tPSIxMi44ODQ3ODkiCiAgICAgaW5rc2NhcGU6Y3g9IjI0LjYxNjAyNiIKICAgICBpbmtzY2FwZTpjeT0iMjAuNjQ5MDI1IgogICAgIGlua3NjYXBlOmRvY3VtZW50LXVuaXRzPSJweCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtcm90YXRpb249IjAiCiAgICAgc2hvd2dyaWQ9InRydWUiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwNTIiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpvYmplY3QtcGF0aHM9InRydWUiPgogICAgPGlua3NjYXBlOmdyaWQKICAgICAgIGlkPSJncmlkMjU2NyIKICAgICAgIHR5cGU9Inh5Z3JpZCIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEyMDAwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZSAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaWQ9ImxheWVyMSI+CiAgICA8Y2lyY2xlCiAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZS13aWR0aDowLjgwMDEzMiIKICAgICAgIGlkPSJwYXRoMjU3NCIKICAgICAgIGN4PSIyNSIKICAgICAgIGN5PSIyNSIKICAgICAgIHI9IjIyIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMjU3OCIKICAgICAgIGQ9Im0gMjUuMTg4OTc2LDMgdiA0NCAwIgogICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MC4zNzc5NTM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MC4wMTY0ODQ5IiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMjU4NCIKICAgICAgIGQ9Im0gMywyNS4xIGggNDQgdiAwIgogICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2Y5ZjlmOTtzdHJva2Utd2lkdGg6MC4yO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjAuNDU5NzEyIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiNmOWY5Zjk7c3Ryb2tlLXdpZHRoOjAuMjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eTowLjQ1OTcxMiIKICAgICAgIGQ9Im0gMjUuMSwzIHYgNDQgMCIKICAgICAgIGlkPSJwYXRoMjU5OCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDBmZjAwO3N0cm9rZTojZjlmOWY5O3N0cm9rZS13aWR0aDowLjAxNTUyMjI7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eTowLjQ1OTcxMiIKICAgICAgIGQ9Im0gMy4wNDIwNTE5LDI0LjcwNDE5NCBjIDAuMDE2OTk1LC0wLjEzODcyOSAwLjA0ODkwOSwtMC42NzEzMzQgMC4wNzA5MTksLTEuMTgzNTY2IDAuMDk1MjQ2LC0yLjIxNjYyMyAwLjczNDI0MjcsLTQuODk4MzE3IDEuNzEwNjE5OCwtNy4xNzkwMDcgMC43NDcxMDQ4LC0xLjc0NTE0IDIuMDk2MDUxLC0zLjk0NDUyMSAzLjI4NDQ3NTgsLTUuMzU1MTUyIDAuNzQxMDg1NywtMC44Nzk2NTEgMi4xNDI3NTE1LC0yLjI3NTk1NzYgMy4wMDM2NjQ1LC0yLjk5MjE4MDQgMS40OTA0ODEsLTEuMjM5OTgyOCAzLjg4Nzg5NSwtMi42NDg4MTc5IDUuNzgyMDExLC0zLjM5Nzc4NjIgMi4zMzYwNjgsLTAuOTIzNzI0IDUuMjM5MTg5LC0xLjUyNjM0NDUgNy4zNTMxNTYsLTEuNTI2MzQ0NSBoIDAuNzE4Mzc3IFYgMTQuMDEzMjk0IDI0Ljk1NjQzIEggMTMuOTg4MjEzIDMuMDExMTUxMiBaIgogICAgICAgaWQ9InBhdGgyNjAyIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7c3Ryb2tlOiNmOWY5Zjk7c3Ryb2tlLXdpZHRoOjAuMDE1NTIyMjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjAuNDU5NzEyIgogICAgICAgZD0iTSAzLjA1NTE0NDIsMjQuMDQ0NTAyIEMgMy4zMTUwNTIzLDE5LjQyNDI5IDQuNzcxMjMyNSwxNS40MjQ1NjYgNy41NTAwNTIyLDExLjY5ODIzMSA4LjM3MjA1NzYsMTAuNTk1OTQxIDEwLjU3Njg5LDguMzg5MDE2NCAxMS42NDIzMzcsNy42MDIwNjQzIGMgMi4wMTU3MiwtMS40ODg4MzUgNC4xODYyMDIsLTIuNjQ0Mjc4IDYuMjY0ODIzLC0zLjMzNTA0MDUgMi4wMTY2ODcsLTAuNjcwMTgwOSAzLjkzMDA4NywtMS4wMzk0OSA1LjY5MjIzOCwtMS4wOTg2NzAyIGwgMS4yMjIzNzEsLTAuMDQxMDUyIFYgMTQuMDAzMDYgMjQuODc4ODE5IEggMTMuOTE0OTg5IDMuMDA4MjEgWiIKICAgICAgIGlkPSJwYXRoMjYwNCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDBmZjAwO3N0cm9rZTojZjlmOWY5O3N0cm9rZS13aWR0aDowLjAxNTUyMjI7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eTowLjQ1OTcxMiIKICAgICAgIGQ9Ik0gMjUuMzA3NzYxLDEzLjk1MDg5NyBWIDMuMDA3NzYxMSBoIDAuNjAxOTYgYyAwLjMzMTA3OCwwIDEuMDUzNTM3LDAuMDUyODI0IDEuNjA1NDY1LDAuMTE3Mzg2MyA0LjA0ODE3OCwwLjQ3MzU0MDggNy42MTQzMzYsMS45MjMyOTkgMTAuOTQ3NjIxLDQuNDUwNTYwMiAwLjQyNjg2LDAuMzIzNjQwNyAxLjM1MzQzNiwxLjE2NTc2NSAyLjA1OTA1OSwxLjg3MTM4NzQgMS43OTI5NjksMS43OTI5NjkgMi45NDg3ODMsMy4zNTY1OSA0LjAyODc3Myw1LjQ1MDI1IDEuNDc3ODU3LDIuODY0OTYxIDIuNDEwNTYxLDYuNDU0OTYgMi40MTA1NjEsOS4yNzgzMTEgdiAwLjcxODM3NyBIIDM2LjEzNDQ4IDI1LjMwNzc2MSBaIgogICAgICAgaWQ9InBhdGgyNjA2IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwZmY7c3Ryb2tlOiNmOWY5Zjk7c3Ryb2tlLXdpZHRoOjAuMDE1NTIyMjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjAuNDU5NzEyIgogICAgICAgZD0iTSAyMy42NzU2NDEsNDYuOTE4MTIxIEMgMTcuMjQ5MjMyLDQ2LjU0NzU2NiAxMS4zMTY2NDYsNDMuMzU5MzA0IDcuNDA2NDk0MywzOC4xNzQ4MzYgNC44MDU0MDU3LDM0LjcyNjA1NCAzLjIzNTkxODYsMzAuNDU1MzcxIDMuMDU0OTY0MywyNi4zMzQwMjMgbCAtMC4wNDY4NTUsLTEuMDY3MTUgSCAxMy45NjI3NjIgMjQuOTE3NDE1IHYgMTAuODY1NTI1IGMgMCwxMC4zMDA5MjQgLTAuMDA3MSwxMC44NjQ5MDUgLTAuMTM1ODE5LDEwLjg1MzU5NCAtMC4wNzQ3LC0wLjAwNjYgLTAuNTcyMzgsLTAuMDM3MSAtMS4xMDU5NTUsLTAuMDY3ODcgeiIKICAgICAgIGlkPSJwYXRoMjYwOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZjAwO3N0cm9rZTojZjlmOWY5O3N0cm9rZS13aWR0aDowLjAxNTUyMjI7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eTowLjQ1OTcxMiIKICAgICAgIGQ9Ik0gMjUuMzA3NzYxLDM2LjExMzAyIFYgMjUuMjY2ODczIEggMzYuMTM0NDggNDYuOTYxMiB2IDAuNjAxOTYgYyAwLDEuOTk1MDA0IC0wLjYyNDU0OSw0Ljk1NjEyOCAtMS41MjYzNDUsNy4yMzY3NCAtMC43NDgyNjMsMS44OTIzMzIgLTIuMTU0NzcxLDQuMjg2NDA0IC0zLjM5NjkxMSw1Ljc4MjAxMiAtMC42NzQxNzEsMC44MTE3NCAtMi4wODYyNDcsMi4yMzk4MzIgLTIuODcyODMxLDIuOTA1NDE1IC0zLjU4Mzc0MiwzLjAzMjQ0OCAtOC4xOTYyNTcsNC44NjkxMzYgLTEyLjgzOTgzNCw1LjExMjc3OSBsIC0xLjAxNzUxOCwwLjA1MzM5IHoiCiAgICAgICBpZD0icGF0aDI2MTAiIC8+CiAgPC9nPgo8L3N2Zz4K");
background-repeat: no-repeat;
background-size: 2rem;
height: 2rem;
width: 2rem;
}
#pick-font-color:hover,
#pick-bg-color:hover {
cursor: pointer;
}
#controls {
position: fixed;
top: 0.7rem;
left: 0.7rem;
display: flex;
align-items: center;
flex-wrap: wrap;
}
#controls > * {
margin: 0 0.5rem;
}
@media screen and (max-width: 35rem) {
#root {
max-width: 100vw;
}
#families {
max-width: 10rem;
}
}
@media screen and (max-height: 25rem) {
#root {
margin-top: 4rem;
}
}
<html>
<head>
<title>Google fonts demo</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="https://unpkg.com/vanilla-picker-mini"></script>
<script src="index.js" defer></script>
</head>
<body>
<div title="editable" contenteditable id="root">
The quick brown fox jumps over the lazy dog
</div>
<div id="controls">
<select id="families" tabindex="1" required>
<option value="" disabled selected>Pick a Google font</option>
<option value="ABeeZee">ABeeZee</option>
<option value="Abel">Abel</option>
<option value="Abhaya Libre">Abhaya Libre</option>
<option value="Abril Fatface">Abril Fatface</option>
<option value="Aclonica">Aclonica</option>
<option value="Acme">Acme</option>
<option value="Actor">Actor</option>
<option value="Adamina">Adamina</option>
<option value="Advent Pro">Advent Pro</option>
<option value="Aguafina Script">Aguafina Script</option>
<option value="Akronim">Akronim</option>
<option value="Aladin">Aladin</option>
<option value="Alata">Alata</option>
<option value="Alatsi">Alatsi</option>
<option value="Aldrich">Aldrich</option>
<option value="Alef">Alef</option>
<option value="Alegreya">Alegreya</option>
<option value="Alegreya SC">Alegreya SC</option>
<option value="Alegreya Sans">Alegreya Sans</option>
<option value="Alegreya Sans SC">Alegreya Sans SC</option>
<option value="Aleo">Aleo</option>
<option value="Alex Brush">Alex Brush</option>
<option value="Alfa Slab One">Alfa Slab One</option>
<option value="Alice">Alice</option>
<option value="Alike">Alike</option>
<option value="Alike Angular">Alike Angular</option>
<option value="Allan">Allan</option>
<option value="Allerta">Allerta</option>
<option value="Allerta Stencil">Allerta Stencil</option>
<option value="Allura">Allura</option>
<option value="Almarai">Almarai</option>
<option value="Almendra">Almendra</option>
<option value="Almendra Display">Almendra Display</option>
<option value="Almendra SC">Almendra SC</option>
<option value="Amarante">Amarante</option>
<option value="Amaranth">Amaranth</option>
<option value="Amatic SC">Amatic SC</option>
<option value="Amethysta">Amethysta</option>
<option value="Amiko">Amiko</option>
<option value="Amiri">Amiri</option>
<option value="Amita">Amita</option>
<option value="Anaheim">Anaheim</option>
<option value="Andada">Andada</option>
<option value="Andika">Andika</option>
<option value="Angkor">Angkor</option>
<option value="Annie Use Your Telescope"
>Annie Use Your Telescope</option
>
<option value="Anonymous Pro">Anonymous Pro</option>
<option value="Antic">Antic</option>
<option value="Antic Didone">Antic Didone</option>
<option value="Antic Slab">Antic Slab</option>
<option value="Anton">Anton</option>
<option value="Arapey">Arapey</option>
<option value="Arbutus">Arbutus</option>
<option value="Arbutus Slab">Arbutus Slab</option>
<option value="Architects Daughter">Architects Daughter</option>
<option value="Archivo">Archivo</option>
<option value="Archivo Black">Archivo Black</option>
<option value="Archivo Narrow">Archivo Narrow</option>
<option value="Aref Ruqaa">Aref Ruqaa</option>
<option value="Arima Madurai">Arima Madurai</option>
<option value="Arimo">Arimo</option>
<option value="Arizonia">Arizonia</option>
<option value="Armata">Armata</option>
<option value="Arsenal">Arsenal</option>
<option value="Artifika">Artifika</option>
<option value="Arvo">Arvo</option>
<option value="Arya">Arya</option>
<option value="Asap">Asap</option>
<option value="Asap Condensed">Asap Condensed</option>
<option value="Asar">Asar</option>
<option value="Asset">Asset</option>
<option value="Assistant">Assistant</option>
<option value="Astloch">Astloch</option>
<option value="Asul">Asul</option>
<option value="Athiti">Athiti</option>
<option value="Atma">Atma</option>
<option value="Atomic Age">Atomic Age</option>
<option value="Aubrey">Aubrey</option>
<option value="Audiowide">Audiowide</option>
<option value="Autour One">Autour One</option>
<option value="Average">Average</option>
<option value="Average Sans">Average Sans</option>
<option value="Averia Gruesa Libre">Averia Gruesa Libre</option>
<option value="Averia Libre">Averia Libre</option>
<option value="Averia Sans Libre">Averia Sans Libre</option>
<option value="Averia Serif Libre">Averia Serif Libre</option>
<option value="B612">B612</option>
<option value="B612 Mono">B612 Mono</option>
<option value="Bad Script">Bad Script</option>
<option value="Bahiana">Bahiana</option>
<option value="Bahianita">Bahianita</option>
<option value="Bai Jamjuree">Bai Jamjuree</option>
<option value="Baloo 2">Baloo 2</option>
<option value="Baloo Bhai 2">Baloo Bhai 2</option>
<option value="Baloo Bhaina 2">Baloo Bhaina 2</option>
<option value="Baloo Chettan 2">Baloo Chettan 2</option>
<option value="Baloo Da 2">Baloo Da 2</option>
<option value="Baloo Paaji 2">Baloo Paaji 2</option>
<option value="Baloo Tamma 2">Baloo Tamma 2</option>
<option value="Baloo Tammudu 2">Baloo Tammudu 2</option>
<option value="Baloo Thambi 2">Baloo Thambi 2</option>
<option value="Balsamiq Sans">Balsamiq Sans</option>
<option value="Balthazar">Balthazar</option>
<option value="Bangers">Bangers</option>
<option value="Barlow">Barlow</option>
<option value="Barlow Condensed">Barlow Condensed</option>
<option value="Barlow Semi Condensed">Barlow Semi Condensed</option>
<option value="Barriecito">Barriecito</option>
<option value="Barrio">Barrio</option>
<option value="Basic">Basic</option>
<option value="Baskervville">Baskervville</option>
<option value="Battambang">Battambang</option>
<option value="Baumans">Baumans</option>
<option value="Bayon">Bayon</option>
<option value="Be Vietnam">Be Vietnam</option>
<option value="Bebas Neue">Bebas Neue</option>
<option value="Belgrano">Belgrano</option>
<option value="Bellefair">Bellefair</option>
<option value="Belleza">Belleza</option>
<option value="Bellota">Bellota</option>
<option value="Bellota Text">Bellota Text</option>
<option value="BenchNine">BenchNine</option>
<option value="Bentham">Bentham</option>
<option value="Berkshire Swash">Berkshire Swash</option>
<option value="Beth Ellen">Beth Ellen</option>
<option value="Bevan">Bevan</option>
<option value="Big Shoulders Display">Big Shoulders Display</option>
<option value="Big Shoulders Text">Big Shoulders Text</option>
<option value="Bigelow Rules">Bigelow Rules</option>
<option value="Bigshot One">Bigshot One</option>
<option value="Bilbo">Bilbo</option>
<option value="Bilbo Swash Caps">Bilbo Swash Caps</option>
<option value="BioRhyme">BioRhyme</option>
<option value="BioRhyme Expanded">BioRhyme Expanded</option>
<option value="Biryani">Biryani</option>
<option value="Bitter">Bitter</option>
<option value="Black And White Picture">Black And White Picture</option>
<option value="Black Han Sans">Black Han Sans</option>
<option value="Black Ops One">Black Ops One</option>
<option value="Blinker">Blinker</option>
<option value="Bokor">Bokor</option>
<option value="Bonbon">Bonbon</option>
<option value="Boogaloo">Boogaloo</option>
<option value="Bowlby One">Bowlby One</option>
<option value="Bowlby One SC">Bowlby One SC</option>
<option value="Brawler">Brawler</option>
<option value="Bree Serif">Bree Serif</option>
<option value="Bubblegum Sans">Bubblegum Sans</option>
<option value="Bubbler One">Bubbler One</option>
<option value="Buda">Buda</option>
<option value="Buenard">Buenard</option>
<option value="Bungee">Bungee</option>
<option value="Bungee Hairline">Bungee Hairline</option>
<option value="Bungee Inline">Bungee Inline</option>
<option value="Bungee Outline">Bungee Outline</option>
<option value="Bungee Shade">Bungee Shade</option>
<option value="Butcherman">Butcherman</option>
<option value="Butterfly Kids">Butterfly Kids</option>
<option value="Cabin">Cabin</option>
<option value="Cabin Condensed">Cabin Condensed</option>
<option value="Cabin Sketch">Cabin Sketch</option>
<option value="Caesar Dressing">Caesar Dressing</option>
<option value="Cagliostro">Cagliostro</option>
<option value="Cairo">Cairo</option>
<option value="Caladea">Caladea</option>
<option value="Calistoga">Calistoga</option>
<option value="Calligraffitti">Calligraffitti</option>
<option value="Cambay">Cambay</option>
<option value="Cambo">Cambo</option>
<option value="Candal">Candal</option>
<option value="Cantarell">Cantarell</option>
<option value="Cantata One">Cantata One</option>
<option value="Cantora One">Cantora One</option>
<option value="Capriola">Capriola</option>
<option value="Cardo">Cardo</option>
<option value="Carme">Carme</option>
<option value="Carrois Gothic">Carrois Gothic</option>
<option value="Carrois Gothic SC">Carrois Gothic SC</option>
<option value="Carter One">Carter One</option>
<option value="Catamaran">Catamaran</option>
<option value="Caudex">Caudex</option>
<option value="Caveat">Caveat</option>
<option value="Caveat Brush">Caveat Brush</option>
<option value="Cedarville Cursive">Cedarville Cursive</option>
<option value="Ceviche One">Ceviche One</option>
<option value="Chakra Petch">Chakra Petch</option>
<option value="Changa">Changa</option>
<option value="Changa One">Changa One</option>
<option value="Chango">Chango</option>
<option value="Charm">Charm</option>
<option value="Charmonman">Charmonman</option>
<option value="Chathura">Chathura</option>
<option value="Chau Philomene One">Chau Philomene One</option>
<option value="Chela One">Chela One</option>
<option value="Chelsea Market">Chelsea Market</option>
<option value="Chenla">Chenla</option>
<option value="Cherry Cream Soda">Cherry Cream Soda</option>
<option value="Cherry Swash">Cherry Swash</option>
<option value="Chewy">Chewy</option>
<option value="Chicle">Chicle</option>
<option value="Chilanka">Chilanka</option>
<option value="Chivo">Chivo</option>
<option value="Chonburi">Chonburi</option>
<option value="Cinzel">Cinzel</option>
<option value="Cinzel Decorative">Cinzel Decorative</option>
<option value="Clicker Script">Clicker Script</option>
<option value="Coda">Coda</option>
<option value="Coda Caption">Coda Caption</option>
<option value="Codystar">Codystar</option>
<option value="Coiny">Coiny</option>
<option value="Combo">Combo</option>
<option value="Comfortaa">Comfortaa</option>
<option value="Comic Neue">Comic Neue</option>
<option value="Coming Soon">Coming Soon</option>
<option value="Concert One">Concert One</option>
<option value="Condiment">Condiment</option>
<option value="Content">Content</option>
<option value="Contrail One">Contrail One</option>
<option value="Convergence">Convergence</option>
<option value="Cookie">Cookie</option>
<option value="Copse">Copse</option>
<option value="Corben">Corben</option>
<option value="Cormorant">Cormorant</option>
<option value="Cormorant Garamond">Cormorant Garamond</option>
<option value="Cormorant Infant">Cormorant Infant</option>
<option value="Cormorant SC">Cormorant SC</option>
<option value="Cormorant Unicase">Cormorant Unicase</option>
<option value="Cormorant Upright">Cormorant Upright</option>
<option value="Courgette">Courgette</option>
<option value="Courier Prime">Courier Prime</option>
<option value="Cousine">Cousine</option>
<option value="Coustard">Coustard</option>
<option value="Covered By Your Grace">Covered By Your Grace</option>
<option value="Crafty Girls">Crafty Girls</option>
<option value="Creepster">Creepster</option>
<option value="Crete Round">Crete Round</option>
<option value="Crimson Pro">Crimson Pro</option>
<option value="Crimson Text">Crimson Text</option>
<option value="Croissant One">Croissant One</option>
<option value="Crushed">Crushed</option>
<option value="Cuprum">Cuprum</option>
<option value="Cute Font">Cute Font</option>
<option value="Cutive">Cutive</option>
<option value="Cutive Mono">Cutive Mono</option>
<option value="DM Mono">DM Mono</option>
<option value="DM Sans">DM Sans</option>
<option value="DM Serif Display">DM Serif Display</option>
<option value="DM Serif Text">DM Serif Text</option>
<option value="Damion">Damion</option>
<option value="Dancing Script">Dancing Script</option>
<option value="Dangrek">Dangrek</option>
<option value="Darker Grotesque">Darker Grotesque</option>
<option value="David Libre">David Libre</option>
<option value="Dawning of a New Day">Dawning of a New Day</option>
<option value="Days One">Days One</option>
<option value="Dekko">Dekko</option>
<option value="Delius">Delius</option>
<option value="Delius Swash Caps">Delius Swash Caps</option>
<option value="Delius Unicase">Delius Unicase</option>
<option value="Della Respira">Della Respira</option>
<option value="Denk One">Denk One</option>
<option value="Devonshire">Devonshire</option>
<option value="Dhurjati">Dhurjati</option>
<option value="Didact Gothic">Didact Gothic</option>
<option value="Diplomata">Diplomata</option>
<option value="Diplomata SC">Diplomata SC</option>
<option value="Do Hyeon">Do Hyeon</option>
<option value="Dokdo">Dokdo</option>
<option value="Domine">Domine</option>
<option value="Donegal One">Donegal One</option>
<option value="Doppio One">Doppio One</option>
<option value="Dorsa">Dorsa</option>
<option value="Dosis">Dosis</option>
<option value="Dr Sugiyama">Dr Sugiyama</option>
<option value="Duru Sans">Duru Sans</option>
<option value="Dynalight">Dynalight</option>
<option value="EB Garamond">EB Garamond</option>
<option value="Eagle Lake">Eagle Lake</option>
<option value="East Sea Dokdo">East Sea Dokdo</option>
<option value="Eater">Eater</option>
<option value="Economica">Economica</option>
<option value="Eczar">Eczar</option>
<option value="El Messiri">El Messiri</option>
<option value="Electrolize">Electrolize</option>
<option value="Elsie">Elsie</option>
<option value="Elsie Swash Caps">Elsie Swash Caps</option>
<option value="Emblema One">Emblema One</option>
<option value="Emilys Candy">Emilys Candy</option>
<option value="Encode Sans">Encode Sans</option>
<option value="Encode Sans Condensed">Encode Sans Condensed</option>
<option value="Encode Sans Expanded">Encode Sans Expanded</option>
<option value="Encode Sans Semi Condensed"
>Encode Sans Semi Condensed</option
>
<option value="Encode Sans Semi Expanded"
>Encode Sans Semi Expanded</option
>
<option value="Engagement">Engagement</option>
<option value="Englebert">Englebert</option>
<option value="Enriqueta">Enriqueta</option>
<option value="Epilogue">Epilogue</option>
<option value="Erica One">Erica One</option>
<option value="Esteban">Esteban</option>
<option value="Euphoria Script">Euphoria Script</option>
<option value="Ewert">Ewert</option>
<option value="Exo">Exo</option>
<option value="Exo 2">Exo 2</option>
<option value="Expletus Sans">Expletus Sans</option>
<option value="Fahkwang">Fahkwang</option>
<option value="Fanwood Text">Fanwood Text</option>
<option value="Farro">Farro</option>
<option value="Farsan">Farsan</option>
<option value="Fascinate">Fascinate</option>
<option value="Fascinate Inline">Fascinate Inline</option>
<option value="Faster One">Faster One</option>
<option value="Fasthand">Fasthand</option>
<option value="Fauna One">Fauna One</option>
<option value="Faustina">Faustina</option>
<option value="Federant">Federant</option>
<option value="Federo">Federo</option>
<option value="Felipa">Felipa</option>
<option value="Fenix">Fenix</option>
<option value="Finger Paint">Finger Paint</option>
<option value="Fira Code">Fira Code</option>
<option value="Fira Mono">Fira Mono</option>
<option value="Fira Sans">Fira Sans</option>
<option value="Fira Sans Condensed">Fira Sans Condensed</option>
<option value="Fira Sans Extra Condensed"
>Fira Sans Extra Condensed</option
>
<option value="Fjalla One">Fjalla One</option>
<option value="Fjord One">Fjord One</option>
<option value="Flamenco">Flamenco</option>
<option value="Flavors">Flavors</option>
<option value="Fondamento">Fondamento</option>
<option value="Fontdiner Swanky">Fontdiner Swanky</option>
<option value="Forum">Forum</option>
<option value="Francois One">Francois One</option>
<option value="Frank Ruhl Libre">Frank Ruhl Libre</option>
<option value="Freckle Face">Freckle Face</option>
<option value="Fredericka the Great">Fredericka the Great</option>
<option value="Fredoka One">Fredoka One</option>
<option value="Freehand">Freehand</option>
<option value="Fresca">Fresca</option>
<option value="Frijole">Frijole</option>
<option value="Fruktur">Fruktur</option>
<option value="Fugaz One">Fugaz One</option>
<option value="GFS Didot">GFS Didot</option>
<option value="GFS Neohellenic">GFS Neohellenic</option>
<option value="Gabriela">Gabriela</option>
<option value="Gaegu">Gaegu</option>
<option value="Gafata">Gafata</option>
<option value="Galada">Galada</option>
<option value="Galdeano">Galdeano</option>
<option value="Galindo">Galindo</option>
<option value="Gamja Flower">Gamja Flower</option>
<option value="Gayathri">Gayathri</option>
<option value="Gelasio">Gelasio</option>
<option value="Gentium Basic">Gentium Basic</option>
<option value="Gentium Book Basic">Gentium Book Basic</option>
<option value="Geo">Geo</option>
<option value="Geostar">Geostar</option>
<option value="Geostar Fill">Geostar Fill</option>
<option value="Germania One">Germania One</option>
<option value="Gidugu">Gidugu</option>
<option value="Gilda Display">Gilda Display</option>
<option value="Girassol">Girassol</option>
<option value="Give You Glory">Give You Glory</option>
<option value="Glass Antiqua">Glass Antiqua</option>
<option value="Glegoo">Glegoo</option>
<option value="Gloria Hallelujah">Gloria Hallelujah</option>
<option value="Goblin One">Goblin One</option>
<option value="Gochi Hand">Gochi Hand</option>
<option value="Gorditas">Gorditas</option>
<option value="Gothic A1">Gothic A1</option>
<option value="Gotu">Gotu</option>
<option value="Goudy Bookletter 1911">Goudy Bookletter 1911</option>
<option value="Graduate">Graduate</option>
<option value="Grand Hotel">Grand Hotel</option>
<option value="Gravitas One">Gravitas One</option>
<option value="Great Vibes">Great Vibes</option>
<option value="Grenze">Grenze</option>
<option value="Grenze Gotisch">Grenze Gotisch</option>
<option value="Griffy">Griffy</option>
<option value="Gruppo">Gruppo</option>
<option value="Gudea">Gudea</option>
<option value="Gugi">Gugi</option>
<option value="Gupter">Gupter</option>
<option value="Gurajada">Gurajada</option>
<option value="Habibi">Habibi</option>
<option value="Halant">Halant</option>
<option value="Hammersmith One">Hammersmith One</option>
<option value="Hanalei">Hanalei</option>
<option value="Hanalei Fill">Hanalei Fill</option>
<option value="Handlee">Handlee</option>
<option value="Hanuman">Hanuman</option>
<option value="Happy Monkey">Happy Monkey</option>
<option value="Harmattan">Harmattan</option>
<option value="Headland One">Headland One</option>
<option value="Heebo">Heebo</option>
<option value="Henny Penny">Henny Penny</option>
<option value="Hepta Slab">Hepta Slab</option>
<option value="Herr Von Muellerhoff">Herr Von Muellerhoff</option>
<option value="Hi Melody">Hi Melody</option>
<option value="Hind">Hind</option>
<option value="Hind Guntur">Hind Guntur</option>
<option value="Hind Madurai">Hind Madurai</option>
<option value="Hind Siliguri">Hind Siliguri</option>
<option value="Hind Vadodara">Hind Vadodara</option>
<option value="Holtwood One SC">Holtwood One SC</option>
<option value="Homemade Apple">Homemade Apple</option>
<option value="Homenaje">Homenaje</option>
<option value="IBM Plex Mono">IBM Plex Mono</option>
<option value="IBM Plex Sans">IBM Plex Sans</option>
<option value="IBM Plex Sans Condensed">IBM Plex Sans Condensed</option>
<option value="IBM Plex Serif">IBM Plex Serif</option>
<option value="IM Fell DW Pica">IM Fell DW Pica</option>
<option value="IM Fell DW Pica SC">IM Fell DW Pica SC</option>
<option value="IM Fell Double Pica">IM Fell Double Pica</option>
<option value="IM Fell Double Pica SC">IM Fell Double Pica SC</option>
<option value="IM Fell English">IM Fell English</option>
<option value="IM Fell English SC">IM Fell English SC</option>
<option value="IM Fell French Canon">IM Fell French Canon</option>
<option value="IM Fell French Canon SC">IM Fell French Canon SC</option>
<option value="IM Fell Great Primer">IM Fell Great Primer</option>
<option value="IM Fell Great Primer SC">IM Fell Great Primer SC</option>
<option value="Ibarra Real Nova">Ibarra Real Nova</option>
<option value="Iceberg">Iceberg</option>
<option value="Iceland">Iceland</option>
<option value="Imprima">Imprima</option>
<option value="Inconsolata">Inconsolata</option>
<option value="Inder">Inder</option>
<option value="Indie Flower">Indie Flower</option>
<option value="Inika">Inika</option>
<option value="Inknut Antiqua">Inknut Antiqua</option>
<option value="Inria Sans">Inria Sans</option>
<option value="Inria Serif">Inria Serif</option>
<option value="Inter">Inter</option>
<option value="Irish Grover">Irish Grover</option>
<option value="Istok Web">Istok Web</option>
<option value="Italiana">Italiana</option>
<option value="Italianno">Italianno</option>
<option value="Itim">Itim</option>
<option value="Jacques Francois">Jacques Francois</option>
<option value="Jacques Francois Shadow">Jacques Francois Shadow</option>
<option value="Jaldi">Jaldi</option>
<option value="Jim Nightshade">Jim Nightshade</option>
<option value="Jockey One">Jockey One</option>
<option value="Jolly Lodger">Jolly Lodger</option>
<option value="Jomhuria">Jomhuria</option>
<option value="Jomolhari">Jomolhari</option>
<option value="Josefin Sans">Josefin Sans</option>
<option value="Josefin Slab">Josefin Slab</option>
<option value="Jost">Jost</option>
<option value="Joti One">Joti One</option>
<option value="Jua">Jua</option>
<option value="Judson">Judson</option>
<option value="Julee">Julee</option>
<option value="Julius Sans One">Julius Sans One</option>
<option value="Junge">Junge</option>
<option value="Jura">Jura</option>
<option value="Just Another Hand">Just Another Hand</option>
<option value="Just Me Again Down Here">Just Me Again Down Here</option>
<option value="K2D">K2D</option>
<option value="Kadwa">Kadwa</option>
<option value="Kalam">Kalam</option>
<option value="Kameron">Kameron</option>
<option value="Kanit">Kanit</option>
<option value="Kantumruy">Kantumruy</option>
<option value="Karla">Karla</option>
<option value="Karma">Karma</option>
<option value="Katibeh">Katibeh</option>
<option value="Kaushan Script">Kaushan Script</option>
<option value="Kavivanar">Kavivanar</option>
<option value="Kavoon">Kavoon</option>
<option value="Kdam Thmor">Kdam Thmor</option>
<option value="Keania One">Keania One</option>
<option value="Kelly Slab">Kelly Slab</option>
<option value="Kenia">Kenia</option>
<option value="Khand">Khand</option>
<option value="Khmer">Khmer</option>
<option value="Khula">Khula</option>
<option value="Kirang Haerang">Kirang Haerang</option>
<option value="Kite One">Kite One</option>
<option value="Knewave">Knewave</option>
<option value="KoHo">KoHo</option>
<option value="Kodchasan">Kodchasan</option>
<option value="Kosugi">Kosugi</option>
<option value="Kosugi Maru">Kosugi Maru</option>
<option value="Kotta One">Kotta One</option>
<option value="Koulen">Koulen</option>
<option value="Kranky">Kranky</option>
<option value="Kreon">Kreon</option>
<option value="Kristi">Kristi</option>
<option value="Krona One">Krona One</option>
<option value="Krub">Krub</option>
<option value="Kulim Park">Kulim Park</option>
<option value="Kumar One">Kumar One</option>
<option value="Kumar One Outline">Kumar One Outline</option>
<option value="Kurale">Kurale</option>
<option value="La Belle Aurore">La Belle Aurore</option>
<option value="Lacquer">Lacquer</option>
<option value="Laila">Laila</option>
<option value="Lakki Reddy">Lakki Reddy</option>
<option value="Lalezar">Lalezar</option>
<option value="Lancelot">Lancelot</option>
<option value="Lateef">Lateef</option>
<option value="Lato">Lato</option>
<option value="League Script">League Script</option>
<option value="Leckerli One">Leckerli One</option>
<option value="Ledger">Ledger</option>
<option value="Lekton">Lekton</option>
<option value="Lemon">Lemon</option>
<option value="Lemonada">Lemonada</option>
<option value="Lexend Deca">Lexend Deca</option>
<option value="Lexend Exa">Lexend Exa</option>
<option value="Lexend Giga">Lexend Giga</option>
<option value="Lexend Mega">Lexend Mega</option>
<option value="Lexend Peta">Lexend Peta</option>
<option value="Lexend Tera">Lexend Tera</option>
<option value="Lexend Zetta">Lexend Zetta</option>
<option value="Libre Barcode 128">Libre Barcode 128</option>
<option value="Libre Barcode 128 Text">Libre Barcode 128 Text</option>
<option value="Libre Barcode 39">Libre Barcode 39</option>
<option value="Libre Barcode 39 Extended"
>Libre Barcode 39 Extended</option
>
<option value="Libre Barcode 39 Extended Text"
>Libre Barcode 39 Extended Text</option
>
<option value="Libre Barcode 39 Text">Libre Barcode 39 Text</option>
<option value="Libre Baskerville">Libre Baskerville</option>
<option value="Libre Caslon Display">Libre Caslon Display</option>
<option value="Libre Caslon Text">Libre Caslon Text</option>
<option value="Libre Franklin">Libre Franklin</option>
<option value="Life Savers">Life Savers</option>
<option value="Lilita One">Lilita One</option>
<option value="Lily Script One">Lily Script One</option>
<option value="Limelight">Limelight</option>
<option value="Linden Hill">Linden Hill</option>
<option value="Literata">Literata</option>
<option value="Liu Jian Mao Cao">Liu Jian Mao Cao</option>
<option value="Livvic">Livvic</option>
<option value="Lobster">Lobster</option>
<option value="Lobster Two">Lobster Two</option>
<option value="Londrina Outline">Londrina Outline</option>
<option value="Londrina Shadow">Londrina Shadow</option>
<option value="Londrina Sketch">Londrina Sketch</option>
<option value="Londrina Solid">Londrina Solid</option>
<option value="Long Cang">Long Cang</option>
<option value="Lora">Lora</option>
<option value="Love Ya Like A Sister">Love Ya Like A Sister</option>
<option value="Loved by the King">Loved by the King</option>
<option value="Lovers Quarrel">Lovers Quarrel</option>
<option value="Luckiest Guy">Luckiest Guy</option>
<option value="Lusitana">Lusitana</option>
<option value="Lustria">Lustria</option>
<option value="M PLUS 1p">M PLUS 1p</option>
<option value="M PLUS Rounded 1c">M PLUS Rounded 1c</option>
<option value="Ma Shan Zheng">Ma Shan Zheng</option>
<option value="Macondo">Macondo</option>
<option value="Macondo Swash Caps">Macondo Swash Caps</option>
<option value="Mada">Mada</option>
<option value="Magra">Magra</option>
<option value="Maiden Orange">Maiden Orange</option>
<option value="Maitree">Maitree</option>
<option value="Major Mono Display">Major Mono Display</option>
<option value="Mako">Mako</option>
<option value="Mali">Mali</option>
<option value="Mallanna">Mallanna</option>
<option value="Mandali">Mandali</option>
<option value="Manjari">Manjari</option>
<option value="Manrope">Manrope</option>
<option value="Mansalva">Mansalva</option>
<option value="Manuale">Manuale</option>
<option value="Marcellus">Marcellus</option>
<option value="Marcellus SC">Marcellus SC</option>
<option value="Marck Script">Marck Script</option>
<option value="Margarine">Margarine</option>
<option value="Markazi Text">Markazi Text</option>
<option value="Marko One">Marko One</option>
<option value="Marmelad">Marmelad</option>
<option value="Martel">Martel</option>
<option value="Martel Sans">Martel Sans</option>
<option value="Marvel">Marvel</option>
<option value="Mate">Mate</option>
<option value="Mate SC">Mate SC</option>
<option value="Maven Pro">Maven Pro</option>
<option value="McLaren">McLaren</option>
<option value="Meddon">Meddon</option>
<option value="MedievalSharp">MedievalSharp</option>
<option value="Medula One">Medula One</option>
<option value="Meera Inimai">Meera Inimai</option>
<option value="Megrim">Megrim</option>
<option value="Meie Script">Meie Script</option>
<option value="Merienda">Merienda</option>
<option value="Merienda One">Merienda One</option>
<option value="Merriweather">Merriweather</option>
<option value="Merriweather Sans">Merriweather Sans</option>
<option value="Metal">Metal</option>
<option value="Metal Mania">Metal Mania</option>
<option value="Metamorphous">Metamorphous</option>
<option value="Metrophobic">Metrophobic</option>
<option value="Michroma">Michroma</option>
<option value="Milonga">Milonga</option>
<option value="Miltonian">Miltonian</option>
<option value="Miltonian Tattoo">Miltonian Tattoo</option>
<option value="Mina">Mina</option>
<option value="Miniver">Miniver</option>
<option value="Miriam Libre">Miriam Libre</option>
<option value="Mirza">Mirza</option>
<option value="Miss Fajardose">Miss Fajardose</option>
<option value="Mitr">Mitr</option>
<option value="Modak">Modak</option>
<option value="Modern Antiqua">Modern Antiqua</option>
<option value="Mogra">Mogra</option>
<option value="Molengo">Molengo</option>
<option value="Molle">Molle</option>
<option value="Monda">Monda</option>
<option value="Monofett">Monofett</option>
<option value="Monoton">Monoton</option>
<option value="Monsieur La Doulaise">Monsieur La Doulaise</option>
<option value="Montaga">Montaga</option>
<option value="Montez">Montez</option>
<option value="Montserrat">Montserrat</option>
<option value="Montserrat Alternates">Montserrat Alternates</option>
<option value="Montserrat Subrayada">Montserrat Subrayada</option>
<option value="Moul">Moul</option>
<option value="Moulpali">Moulpali</option>
<option value="Mountains of Christmas">Mountains of Christmas</option>
<option value="Mouse Memoirs">Mouse Memoirs</option>
<option value="Mr Bedfort">Mr Bedfort</option>
<option value="Mr Dafoe">Mr Dafoe</option>
<option value="Mr De Haviland">Mr De Haviland</option>
<option value="Mrs Saint Delafield">Mrs Saint Delafield</option>
<option value="Mrs Sheppards">Mrs Sheppards</option>
<option value="Mukta">Mukta</option>
<option value="Mukta Mahee">Mukta Mahee</option>
<option value="Mukta Malar">Mukta Malar</option>
<option value="Mukta Vaani">Mukta Vaani</option>
<option value="Mulish">Mulish</option>
<option value="MuseoModerno">MuseoModerno</option>
<option value="Mystery Quest">Mystery Quest</option>
<option value="NTR">NTR</option>
<option value="Nanum Brush Script">Nanum Brush Script</option>
<option value="Nanum Gothic">Nanum Gothic</option>
<option value="Nanum Gothic Coding">Nanum Gothic Coding</option>
<option value="Nanum Myeongjo">Nanum Myeongjo</option>
<option value="Nanum Pen Script">Nanum Pen Script</option>
<option value="Neucha">Neucha</option>
<option value="Neuton">Neuton</option>
<option value="New Rocker">New Rocker</option>
<option value="News Cycle">News Cycle</option>
<option value="Niconne">Niconne</option>
<option value="Niramit">Niramit</option>
<option value="Nixie One">Nixie One</option>
<option value="Nobile">Nobile</option>
<option value="Nokora">Nokora</option>
<option value="Norican">Norican</option>
<option value="Nosifer">Nosifer</option>
<option value="Notable">Notable</option>
<option value="Nothing You Could Do">Nothing You Could Do</option>
<option value="Noticia Text">Noticia Text</option>
<option value="Noto Sans">Noto Sans</option>
<option value="Noto Sans HK">Noto Sans HK</option>
<option value="Noto Sans JP">Noto Sans JP</option>
<option value="Noto Sans KR">Noto Sans KR</option>
<option value="Noto Sans SC">Noto Sans SC</option>
<option value="Noto Sans TC">Noto Sans TC</option>
<option value="Noto Serif">Noto Serif</option>
<option value="Noto Serif JP">Noto Serif JP</option>
<option value="Noto Serif KR">Noto Serif KR</option>
<option value="Noto Serif SC">Noto Serif SC</option>
<option value="Noto Serif TC">Noto Serif TC</option>
<option value="Nova Cut">Nova Cut</option>
<option value="Nova Flat">Nova Flat</option>
<option value="Nova Mono">Nova Mono</option>
<option value="Nova Oval">Nova Oval</option>
<option value="Nova Round">Nova Round</option>
<option value="Nova Script">Nova Script</option>
<option value="Nova Slim">Nova Slim</option>
<option value="Nova Square">Nova Square</option>
<option value="Numans">Numans</option>
<option value="Nunito">Nunito</option>
<option value="Nunito Sans">Nunito Sans</option>
<option value="Odibee Sans">Odibee Sans</option>
<option value="Odor Mean Chey">Odor Mean Chey</option>
<option value="Offside">Offside</option>
<option value="Old Standard TT">Old Standard TT</option>
<option value="Oldenburg">Oldenburg</option>
<option value="Oleo Script">Oleo Script</option>
<option value="Oleo Script Swash Caps">Oleo Script Swash Caps</option>
<option value="Open Sans">Open Sans</option>
<option value="Open Sans Condensed">Open Sans Condensed</option>
<option value="Oranienbaum">Oranienbaum</option>
<option value="Orbitron">Orbitron</option>
<option value="Oregano">Oregano</option>
<option value="Orienta">Orienta</option>
<option value="Original Surfer">Original Surfer</option>
<option value="Oswald">Oswald</option>
<option value="Over the Rainbow">Over the Rainbow</option>
<option value="Overlock">Overlock</option>
<option value="Overlock SC">Overlock SC</option>
<option value="Overpass">Overpass</option>
<option value="Overpass Mono">Overpass Mono</option>
<option value="Ovo">Ovo</option>
<option value="Oxanium">Oxanium</option>
<option value="Oxygen">Oxygen</option>
<option value="Oxygen Mono">Oxygen Mono</option>
<option value="PT Mono">PT Mono</option>
<option value="PT Sans">PT Sans</option>
<option value="PT Sans Caption">PT Sans Caption</option>
<option value="PT Sans Narrow">PT Sans Narrow</option>
<option value="PT Serif">PT Serif</option>
<option value="PT Serif Caption">PT Serif Caption</option>
<option value="Pacifico">Pacifico</option>
<option value="Padauk">Padauk</option>
<option value="Palanquin">Palanquin</option>
<option value="Palanquin Dark">Palanquin Dark</option>
<option value="Pangolin">Pangolin</option>
<option value="Paprika">Paprika</option>
<option value="Parisienne">Parisienne</option>
<option value="Passero One">Passero One</option>
<option value="Passion One">Passion One</option>
<option value="Pathway Gothic One">Pathway Gothic One</option>
<option value="Patrick Hand">Patrick Hand</option>
<option value="Patrick Hand SC">Patrick Hand SC</option>
<option value="Pattaya">Pattaya</option>
<option value="Patua One">Patua One</option>
<option value="Pavanam">Pavanam</option>
<option value="Paytone One">Paytone One</option>
<option value="Peddana">Peddana</option>
<option value="Peralta">Peralta</option>
<option value="Permanent Marker">Permanent Marker</option>
<option value="Petit Formal Script">Petit Formal Script</option>
<option value="Petrona">Petrona</option>
<option value="Philosopher">Philosopher</option>
<option value="Piedra">Piedra</option>
<option value="Pinyon Script">Pinyon Script</option>
<option value="Pirata One">Pirata One</option>
<option value="Plaster">Plaster</option>
<option value="Play">Play</option>
<option value="Playball">Playball</option>
<option value="Playfair Display">Playfair Display</option>
<option value="Playfair Display SC">Playfair Display SC</option>
<option value="Podkova">Podkova</option>
<option value="Poiret One">Poiret One</option>
<option value="Poller One">Poller One</option>
<option value="Poly">Poly</option>
<option value="Pompiere">Pompiere</option>
<option value="Pontano Sans">Pontano Sans</option>
<option value="Poor Story">Poor Story</option>
<option value="Poppins">Poppins</option>
<option value="Port Lligat Sans">Port Lligat Sans</option>
<option value="Port Lligat Slab">Port Lligat Slab</option>
<option value="Pragati Narrow">Pragati Narrow</option>
<option value="Prata">Prata</option>
<option value="Preahvihear">Preahvihear</option>
<option value="Press Start 2P">Press Start 2P</option>
<option value="Pridi">Pridi</option>
<option value="Princess Sofia">Princess Sofia</option>
<option value="Prociono">Prociono</option>
<option value="Prompt">Prompt</option>
<option value="Prosto One">Prosto One</option>
<option value="Proza Libre">Proza Libre</option>
<option value="Public Sans">Public Sans</option>
<option value="Puritan">Puritan</option>
<option value="Purple Purse">Purple Purse</option>
<option value="Quando">Quando</option>
<option value="Quantico">Quantico</option>
<option value="Quattrocento">Quattrocento</option>
<option value="Quattrocento Sans">Quattrocento Sans</option>
<option value="Questrial">Questrial</option>
<option value="Quicksand">Quicksand</option>
<option value="Quintessential">Quintessential</option>
<option value="Qwigley">Qwigley</option>
<option value="Racing Sans One">Racing Sans One</option>
<option value="Radley">Radley</option>
<option value="Rajdhani">Rajdhani</option>
<option value="Rakkas">Rakkas</option>
<option value="Raleway">Raleway</option>
<option value="Raleway Dots">Raleway Dots</option>
<option value="Ramabhadra">Ramabhadra</option>
<option value="Ramaraja">Ramaraja</option>
<option value="Rambla">Rambla</option>
<option value="Rammetto One">Rammetto One</option>
<option value="Ranchers">Ranchers</option>
<option value="Rancho">Rancho</option>
<option value="Ranga">Ranga</option>
<option value="Rasa">Rasa</option>
<option value="Rationale">Rationale</option>
<option value="Ravi Prakash">Ravi Prakash</option>
<option value="Red Hat Display">Red Hat Display</option>
<option value="Red Hat Text">Red Hat Text</option>
<option value="Red Rose">Red Rose</option>
<option value="Redressed">Redressed</option>
<option value="Reem Kufi">Reem Kufi</option>
<option value="Reenie Beanie">Reenie Beanie</option>
<option value="Revalia">Revalia</option>
<option value="Rhodium Libre">Rhodium Libre</option>
<option value="Ribeye">Ribeye</option>
<option value="Ribeye Marrow">Ribeye Marrow</option>
<option value="Righteous">Righteous</option>
<option value="Risque">Risque</option>
<option value="Roboto">Roboto</option>
<option value="Roboto Condensed">Roboto Condensed</option>
<option value="Roboto Mono">Roboto Mono</option>
<option value="Roboto Slab">Roboto Slab</option>
<option value="Rochester">Rochester</option>
<option value="Rock Salt">Rock Salt</option>
<option value="Rokkitt">Rokkitt</option>
<option value="Romanesco">Romanesco</option>
<option value="Ropa Sans">Ropa Sans</option>
<option value="Rosario">Rosario</option>
<option value="Rosarivo">Rosarivo</option>
<option value="Rouge Script">Rouge Script</option>
<option value="Rowdies">Rowdies</option>
<option value="Rozha One">Rozha One</option>
<option value="Rubik">Rubik</option>
<option value="Rubik Mono One">Rubik Mono One</option>
<option value="Ruda">Ruda</option>
<option value="Rufina">Rufina</option>
<option value="Ruge Boogie">Ruge Boogie</option>
<option value="Ruluko">Ruluko</option>
<option value="Rum Raisin">Rum Raisin</option>
<option value="Ruslan Display">Ruslan Display</option>
<option value="Russo One">Russo One</option>
<option value="Ruthie">Ruthie</option>
<option value="Rye">Rye</option>
<option value="Sacramento">Sacramento</option>
<option value="Sahitya">Sahitya</option>
<option value="Sail">Sail</option>
<option value="Saira">Saira</option>
<option value="Saira Condensed">Saira Condensed</option>
<option value="Saira Extra Condensed">Saira Extra Condensed</option>
<option value="Saira Semi Condensed">Saira Semi Condensed</option>
<option value="Saira Stencil One">Saira Stencil One</option>
<option value="Salsa">Salsa</option>
<option value="Sanchez">Sanchez</option>
<option value="Sancreek">Sancreek</option>
<option value="Sansita">Sansita</option>
<option value="Sarabun">Sarabun</option>
<option value="Sarala">Sarala</option>
<option value="Sarina">Sarina</option>
<option value="Sarpanch">Sarpanch</option>
<option value="Satisfy">Satisfy</option>
<option value="Sawarabi Gothic">Sawarabi Gothic</option>
<option value="Sawarabi Mincho">Sawarabi Mincho</option>
<option value="Scada">Scada</option>
<option value="Scheherazade">Scheherazade</option>
<option value="Schoolbell">Schoolbell</option>
<option value="Scope One">Scope One</option>
<option value="Seaweed Script">Seaweed Script</option>
<option value="Secular One">Secular One</option>
<option value="Sedgwick Ave">Sedgwick Ave</option>
<option value="Sedgwick Ave Display">Sedgwick Ave Display</option>
<option value="Sen">Sen</option>
<option value="Sevillana">Sevillana</option>
<option value="Seymour One">Seymour One</option>
<option value="Shadows Into Light">Shadows Into Light</option>
<option value="Shadows Into Light Two">Shadows Into Light Two</option>
<option value="Shanti">Shanti</option>
<option value="Share">Share</option>
<option value="Share Tech">Share Tech</option>
<option value="Share Tech Mono">Share Tech Mono</option>
<option value="Shojumaru">Shojumaru</option>
<option value="Short Stack">Short Stack</option>
<option value="Shrikhand">Shrikhand</option>
<option value="Siemreap">Siemreap</option>
<option value="Sigmar One">Sigmar One</option>
<option value="Signika">Signika</option>
<option value="Signika Negative">Signika Negative</option>
<option value="Simonetta">Simonetta</option>
<option value="Single Day">Single Day</option>
<option value="Sintony">Sintony</option>
<option value="Sirin Stencil">Sirin Stencil</option>
<option value="Six Caps">Six Caps</option>
<option value="Skranji">Skranji</option>
<option value="Slabo 13px">Slabo 13px</option>
<option value="Slabo 27px">Slabo 27px</option>
<option value="Slackey">Slackey</option>
<option value="Smokum">Smokum</option>
<option value="Smythe">Smythe</option>
<option value="Sniglet">Sniglet</option>
<option value="Snippet">Snippet</option>
<option value="Snowburst One">Snowburst One</option>
<option value="Sofadi One">Sofadi One</option>
<option value="Sofia">Sofia</option>
<option value="Solway">Solway</option>
<option value="Song Myung">Song Myung</option>
<option value="Sonsie One">Sonsie One</option>
<option value="Sora">Sora</option>
<option value="Sorts Mill Goudy">Sorts Mill Goudy</option>
<option value="Source Code Pro">Source Code Pro</option>
<option value="Source Sans Pro">Source Sans Pro</option>
<option value="Source Serif Pro">Source Serif Pro</option>
<option value="Space Mono">Space Mono</option>
<option value="Spartan">Spartan</option>
<option value="Special Elite">Special Elite</option>
<option value="Spectral">Spectral</option>
<option value="Spectral SC">Spectral SC</option>
<option value="Spicy Rice">Spicy Rice</option>
<option value="Spinnaker">Spinnaker</option>
<option value="Spirax">Spirax</option>
<option value="Squada One">Squada One</option>
<option value="Sree Krushnadevaraya">Sree Krushnadevaraya</option>
<option value="Sriracha">Sriracha</option>
<option value="Srisakdi">Srisakdi</option>
<option value="Staatliches">Staatliches</option>
<option value="Stalemate">Stalemate</option>
<option value="Stalinist One">Stalinist One</option>
<option value="Stardos Stencil">Stardos Stencil</option>
<option value="Stint Ultra Condensed">Stint Ultra Condensed</option>
<option value="Stint Ultra Expanded">Stint Ultra Expanded</option>
<option value="Stoke">Stoke</option>
<option value="Strait">Strait</option>
<option value="Stylish">Stylish</option>
<option value="Sue Ellen Francisco">Sue Ellen Francisco</option>
<option value="Suez One">Suez One</option>
<option value="Sulphur Point">Sulphur Point</option>
<option value="Sumana">Sumana</option>
<option value="Sunflower">Sunflower</option>
<option value="Sunshiney">Sunshiney</option>
<option value="Supermercado One">Supermercado One</option>
<option value="Sura">Sura</option>
<option value="Suranna">Suranna</option>
<option value="Suravaram">Suravaram</option>
<option value="Suwannaphum">Suwannaphum</option>
<option value="Swanky and Moo Moo">Swanky and Moo Moo</option>
<option value="Syncopate">Syncopate</option>
<option value="Tajawal">Tajawal</option>
<option value="Tangerine">Tangerine</option>
<option value="Taprom">Taprom</option>
<option value="Tauri">Tauri</option>
<option value="Taviraj">Taviraj</option>
<option value="Teko">Teko</option>
<option value="Telex">Telex</option>
<option value="Tenali Ramakrishna">Tenali Ramakrishna</option>
<option value="Tenor Sans">Tenor Sans</option>
<option value="Text Me One">Text Me One</option>
<option value="Thasadith">Thasadith</option>
<option value="The Girl Next Door">The Girl Next Door</option>
<option value="Tienne">Tienne</option>
<option value="Tillana">Tillana</option>
<option value="Timmana">Timmana</option>
<option value="Tinos">Tinos</option>
<option value="Titan One">Titan One</option>
<option value="Titillium Web">Titillium Web</option>
<option value="Tomorrow">Tomorrow</option>
<option value="Trade Winds">Trade Winds</option>
<option value="Trirong">Trirong</option>
<option value="Trocchi">Trocchi</option>
<option value="Trochut">Trochut</option>
<option value="Trykker">Trykker</option>
<option value="Tulpen One">Tulpen One</option>
<option value="Turret Road">Turret Road</option>
<option value="Ubuntu">Ubuntu</option>
<option value="Ubuntu Condensed">Ubuntu Condensed</option>
<option value="Ubuntu Mono">Ubuntu Mono</option>
<option value="Ultra">Ultra</option>
<option value="Uncial Antiqua">Uncial Antiqua</option>
<option value="Underdog">Underdog</option>
<option value="Unica One">Unica One</option>
<option value="UnifrakturCook">UnifrakturCook</option>
<option value="UnifrakturMaguntia">UnifrakturMaguntia</option>
<option value="Unkempt">Unkempt</option>
<option value="Unlock">Unlock</option>
<option value="Unna">Unna</option>
<option value="VT323">VT323</option>
<option value="Vampiro One">Vampiro One</option>
<option value="Varela">Varela</option>
<option value="Varela Round">Varela Round</option>
<option value="Varta">Varta</option>
<option value="Vast Shadow">Vast Shadow</option>
<option value="Vesper Libre">Vesper Libre</option>
<option value="Viaoda Libre">Viaoda Libre</option>
<option value="Vibes">Vibes</option>
<option value="Vibur">Vibur</option>
<option value="Vidaloka">Vidaloka</option>
<option value="Viga">Viga</option>
<option value="Voces">Voces</option>
<option value="Volkhov">Volkhov</option>
<option value="Vollkorn">Vollkorn</option>
<option value="Vollkorn SC">Vollkorn SC</option>
<option value="Voltaire">Voltaire</option>
<option value="Waiting for the Sunrise">Waiting for the Sunrise</option>
<option value="Wallpoet">Wallpoet</option>
<option value="Walter Turncoat">Walter Turncoat</option>
<option value="Warnes">Warnes</option>
<option value="Wellfleet">Wellfleet</option>
<option value="Wendy One">Wendy One</option>
<option value="Wire One">Wire One</option>
<option value="Work Sans">Work Sans</option>
<option value="Yanone Kaffeesatz">Yanone Kaffeesatz</option>
<option value="Yantramanav">Yantramanav</option>
<option value="Yatra One">Yatra One</option>
<option value="Yellowtail">Yellowtail</option>
<option value="Yeon Sung">Yeon Sung</option>
<option value="Yeseva One">Yeseva One</option>
<option value="Yesteryear">Yesteryear</option>
<option value="Yrsa">Yrsa</option>
<option value="ZCOOL KuaiLe">ZCOOL KuaiLe</option>
<option value="ZCOOL QingKe HuangYou">ZCOOL QingKe HuangYou</option>
<option value="ZCOOL XiaoWei">ZCOOL XiaoWei</option>
<option value="Zeyada">Zeyada</option>
<option value="Zhi Mang Xing">Zhi Mang Xing</option>
<option value="Zilla Slab">Zilla Slab</option>
<option value="Zilla Slab Highlight">Zilla Slab Highlight</option>
</select>
<div tabindex="2" id="pick-font-color"></div>
<div tabindex="3" id="pick-bg-color"></div>
</div>
</body>
</html>
const root = document.getElementById("root");
const select = document.getElementById("families");
new Picker({
parent: document.getElementById("pick-font-color"),
popup: "bottom",
// alpha: false,
// editor: false,
color: getComputedStyle(root, null).getPropertyValue("color"),
onChange: function (color) {
root.style["color"] = color.hslaString();
},
});
new Picker({
parent: document.getElementById("pick-bg-color"),
color: getComputedStyle(root, null).getPropertyValue("background-color"),
onChange: function (color) {
root.style["background-color"] = color.hslaString();
},
});
select.addEventListener("change", ({ target: { value: family } }) => {
if (family) loadGoogleFont({ family, fontactive });
function fontactive(fontName) {
root.style.fontFamily = `"${fontName}"`;
}
});
select.focus();
function loadGoogleFont({ family, fontactive = () => {} } = {}) {
WebFont.load({
classes: false,
google: {
families: Array.isArray(family) ? family : [family],
},
fontactive,
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment