Apply any one of 998 Google fonts on a text.
Last active
November 28, 2023 11:04
-
-
Save d0ruk/88319765ebc7aa6490094611e1a35e0f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| 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; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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