main.js

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

var app = new Vue({
        el: '#app',
        data: {
            weight: 400,
            spacing: 0,
            fonts: fonts,
            selectedFont: "",
            loading: false,
            checkAnimation: false
        },
        methods: {
            textChange(event) {
                localStorage["text"] = event.target.outerText;
            },
            copy() {
                const s = `Weight: ${this.weight}, Spacing: ${this.spacing}, Font: ${this.selectedFont}`

                const el = document.createElement('textarea');

                el.value = s;
                el.setAttribute('readonly', '');

                el.style.position = 'absolute';
                el.style.left = '-9999px';

                document.body.appendChild(el);

                el.select();

                document.execCommand('copy');

                document.body.removeChild(el);

                let self = this;

                self.checkAnimation = true;

                setTimeout(() => self.checkAnimation = false, 2500)
            }
        },
        watch: {
            selectedFont(font) {
                if (this.selectedFont.length === 0)
                    return;

                this.loading = true;

                console.log("Loading font", font);

                localStorage["font"] = font;

                WebFont.load({
                    google: {
                        families: ["Ubuntu", font, font + ":100,200,300,400,500,600,700,800,900"]
                    },
                });

                let html = document.querySelector("html");
                let intervalID = setInterval(callback, 100);
                let self = this;

                function callback() {
                    if (html && !html.classList.contains("wf-loading")) {
                        console.log("Successfully load font");
                        self.loading = false;
                        clearInterval(intervalID);
                    }
                }
            }
        },
        mounted() {
            this.selectedFont = localStorage["font"] || "Roboto";
            this.$refs.p.textContent = localStorage["text"] || "Enter Text";
        },
        components: {
            'check': httpVueLoader('Check.vue')
        },
    })
;