Vue.component('fontpicker', {
    template: `
    <span
      class="style-pick"
      v-on:click="toggle"
      v-bind:class="{ 'tagged': tag.isTrue}">
        <slot></slot>
    </span>
    `,
    props: ['tag'],
    methods: {
        toggle() {
            vm.$data.isFresh = false
            this.tag.isTrue = !this.tag.isTrue
        }
    }
})

Vue.component('fontdemo', {
  template: `
    <div class="single-font" v-show="typeface.tags.some(o => o.isTrue === true) || fresh">
        <p :style="{
            'font-family': typeface.name,
            'font-size' : this.fontSize,
            'font-weight' : this.fontWeight,
            'font-style' : this.fontStyle
        }">
        <slot></slot>
      </p>
      <footer>
        <section class="font-weights">
            <span
                v-for="weight in weights"
                :style="{ 'font-weight': weight }"
                v-on:click="setWeight(weight)"
                >{{ weight }}</span>
            <span
                v-if="hasItalic"
                class="brz9-icon-italic"
                v-on:click="fontStyle = fontStyle == 'normal' ? 'italic' : 'normal'"
            ></span>
        </section>



        <section class="font-name">
        <span class="font-name">{{ typeface.name }} - </span>
        <span class="copy-css" v-on:click="copyToClipboard()">Copy CSS Link import</span>
        <span
      class="copy-icon-popup"
      v-bind:class="{ 'success': isCopied}"
      ref="element">Copied!</span>
      </section>
      </footer>
    </div>
    `,
  props: ['typeface', 'fresh', 'size'],
  data() {
    return {
      hasItalic: false,
      isCopied: false,
      linkText: '<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/base/',
      linkTextEnd: '">',
      fontWeight: 400,
      fontStyle: "normal",
      weights : []
    }
    },
    computed: {
        fontSize () {
            return this.size + "rem";
    }
  },
  methods: {
    copyToClipboard() {
      let text = this.linkText + this.typeface.name.toLowerCase() + ".css" + this.linkTextEnd;
      const textarea = document.createElement('textarea')
      textarea.value = text
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)
      this.copyDone();
    },
    copyDone() {
      this.isCopied = true;
      this.$refs.element.addEventListener('animationend', () => {
        this.isCopied = false;
      });
    },
    setWeight(weight) {
        this.fontWeight = weight;
    }
  },
    mounted() {
        this.weights = this.typeface.fonts.filter(function(weight) {
            return weight.indexOf("i") == -1;
        });
        this.weights.sort(function(a, b) {
            return a - b;
        });
        if (this.typeface.fonts.some(o => o.indexOf("i") > -1)) {
            this.hasItalic = true;
        }
    }
})

let vm = new Vue({
  methods: {
    fontSizeUp() {
        this.fontSize += 0.2;
    },
    fontSizeDown() {
        this.fontSize -= 0.2;
    }
  },
  data() {
    return {
      testText: "The quick brown fox jumps over the lazy dog",
      selection : [],
      selectedTags: [],
      isFresh: true,
      fontSize: 2.0,
      taglist: {
        display: {isTrue : false},
        graphic: {isTrue : false},
        mono: {isTrue : false},
        comic: {isTrue : false},
        neogro: {isTrue : false},
        artnouv : {isTrue : false},
        hand : {isTrue : false},
        condensed : {isTrue : false},
        goth: {isTrue : false},
        fancy: {isTrue : false},
        allcaps: {isTrue : false},
        retro: {isTrue : false},
      },
      alvania : {
        name : "Alvania",
        fonts : [
            "400",
        ],
        tags : [],
        "link": "https://www.graphicpear.com/alvania-typeface/",
        "creator": "Angélica Cardona",
        "creatorLink": "https://www.behance.net/angelicardona",
        "licence": "c",
        "commercial": false,
        "open": false,
    },
    ambidexter : {
        "name": "Ambidexter",
        "fonts": [
            "400",
        ],
        "tags": [],
        "link": "https://www.paratype.com/fonts/eb/ambidexter",
        "creator": "Egor Belozerov",
        "creatorLink": "https://www.instagram.com/egaindahouse/",
        "licence": "SIL",
        "commercial": true,
        "open": true,
    },
    archive : {
        "name": "Archive",
        "fonts": [
            "400",
        ],
        "tags": ["display","allcaps"],
        "link": "https://www.fontfabric.com/fonts/archive/",
        "creator": "Slava Kirilenko",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    arturito : {
        "name": "Arturito",
        "fonts": [
            "400",
        ],
        "tags": ["display"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    avara : {
        "name": "Avara",
        "fonts": [
            "400",
            "400i",
        ],
        "tags": ["serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    avenirnext : {
        "name": "AvenirNext",
        "fonts": [
            "200",
            "300",
            "200i",
            "300i",
            "800i",
            "100",
            "500i",
            "400i",
            "800",
            "500",
            "100i",
            "400",
            "600",
            "700",
            "600i",
            "700i",
        ],
        "tags": ["sans-serif", "neo-grotesque"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    axis : {
        "name": "Axis",
        "fonts": [
            "400",
        ],
        "tags": ["display","allcaps"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    baldur : {
        "name": "Baldur",
        "fonts": [
            "400",
        ],
        "tags": ["art-nougvaeu", "display"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    banco : {
        "name": "Banco",
        "fonts": [
            "400",
        ],
        "tags": ["graphic"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    bizon : {
        "name": "Bizon",
        "fonts": [
            "400",
        ],
        "tags": ["display","allcaps"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    blankenburg : {
        "name": "Blankenburg",
        "fonts": [
            "400",
        ],
        "tags": ["blackletter","display"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    blazed : {
        "name": "Blazed",
        "fonts": [
            "400",
        ],
        "tags": ["graphic","display"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    bondi : {
        "name": "Bondi",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    boston : {
        "name": "Boston",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    catreporter : {
        "name": "CATReporter",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    canobis : {
        "name": "Canobis",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    cherish : {
        "name": "Cherish",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    comictantrum : {
        "name": "ComicTantrum",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    communenuitdebout : {
        "name": "CommuneNuitDebout",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    communenuitdeboutpochoir : {
        "name": "CommuneNuitDeboutPochoir",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    disket : {
        "name": "Disket",
        "fonts": [
            "400",
            "600",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    donjose : {
        "name": "DonJose",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    doppelganger : {
        "name": "Doppelganger",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    envycoder : {
        "name": "EnvyCodeR",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    feastofflesh : {
        "name": "FeastOfFlesh",
        "fonts": [
            "400",
            "400i",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    forta : {
        "name": "Forta",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    grobedeutschmeister : {
        "name": "GrobeDeutschmeister",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    gulfsdisplay : {
        "name": "GulfsDisplay",
        "fonts": [
            "600i",
            "800i",
            "400i",
            "800",
            "200i",
            "200",
            "500i",
            "600",
            "400",
            "300",
            "500",
            "300i",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    hamletcicero : {
        "name": "HamletCicero",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    hamlettertia : {
        "name": "HamletTertia",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    harbinger : {
        "name": "Harbinger",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    hermanoaltoround : {
        "name": "HermanoAltoRound",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    hermit : {
        "name": "Hermit",
        "fonts": [
            "600i",
            "400i",
            "200i",
            "200",
            "400",
            "600",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    humane : {
        "name": "Humane",
        "fonts": [
            "800",
            "400",
            "600",
            "200",
            "500",
            "100",
            "300",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    imposible : {
        "name": "Imposible",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    inter : {
        "name": "Inter",
        "fonts": [
            "600",
            "100i",
            "700",
            "600i",
            "700i",
            "500",
            "400",
            "800",
            "800i",
            "900i",
            "200i",
            "300i",
            "100",
            "900",
            "200",
            "500i",
            "400i",
            "300",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    kielo : {
        "name": "Kielo",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    laborunion : {
        "name": "LaborUnion",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    laborunionsoft : {
        "name": "LaborUnionSoft",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    leaguegothic : {
        "name": "LeagueGothic",
        "fonts": [
            "400i",
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    leaguegothiccondensed : {
        "name": "LeagueGothicCondensed",
        "fonts": [
            "400i",
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    leiko : {
        "name": "Leiko",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    lemonmilk : {
        "name": "LemonMilk",
        "fonts": [
            "500i",
            "400",
            "600i",
            "600",
            "400i",
            "200",
            "500",
            "200i",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    mdtall : {
        "name": "MDTall",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    mamenchisa : {
        "name": "Mamenchisa",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    mammutcat : {
        "name": "MammutCAT",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    margaret : {
        "name": "Margaret",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    marvinvisionsbig : {
        "name": "MarvinVisionsBig",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    mersad : {
        "name": "Mersad",
        "fonts": [
            "400",
            "600",
            "200",
            "700",
            "500",
            "100",
            "300",
            "900",
            "800",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    milkcarton : {
        "name": "MilkCarton",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    misto : {
        "name": "Misto",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    montrappist : {
        "name": "MonTrappist",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "http://montifonti.tilda.ws/mon_trappist",
        "creator": "Vika Usmanova",
        "creatorLink": "https://www.instagram.com/viusmanova/",
        "licence": "SIL",
        "commercial": true,
        "open": true,
    },
    monolith : {
        "name": "Monolith",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    mononoki : {
        "name": "Mononoki",
        "fonts": [
            "600i",
            "400i",
            "600",
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    montreau : {
        "name": "Montreau",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    nim : {
        "name": "NIM",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    newake : {
        "name": "Newake",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    overpass : {
        "name": "Overpass",
        "fonts": [
            "400",
            "600i",
            "600",
            "200i",
            "800i",
            "200",
            "400i",
            "800",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    overpassmono : {
        "name": "OverpassMono",
        "fonts": [
            "400",
            "600",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    planck : {
        "name": "Planck",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    quakep : {
        "name": "Quakep",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    rafigen : {
        "name": "Rafigen",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    refuse : {
        "name": "Refuse",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    remboy : {
        "name": "Remboy",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    resin : {
        "name": "Resin",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    ribes : {
        "name": "Ribes",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    roboto : {
        "name": "Roboto",
        "fonts": [
            "200",
            "400",
            "600",
            "800",
            "600i",
            "800i",
            "400i",
            "200i",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    rousseaudeco : {
        "name": "RousseauDeco",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    saintregus : {
        "name": "SaintRegus",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    sonderregular : {
        "name": "SonderRegular",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    spacemono : {
        "name": "SpaceMono",
        "fonts" : [
        ],
        "tags" : ["mono"],
        "link" : "https://www.colophon-foundry.org/custom-projects/space-mono",
        "creator" : "Colophon Foundry",
        "creatorLink" : "https://www.colophon-foundry.org/",
        "licence" : "SIL",
        "commercial" : true,
        "open": true,
    },
    surfingcapital : {
        "name": "SurfingCapital",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    theboldfont : {
        "name": "TheBoldFont",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    theater : {
        "name": "Theater",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "https://www.behance.net/gallery/102849337/THEATER-FREE-FONT",
        "creator": "Adrian Jordanov",
        "creatorLink": "https://www.behance.net/adrianj_1",
        "licence": "",
        "commercial": true,
        "open": false,
    },
    tintin : {
        "name": "Tintin",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    trappist : {
        "name": "Trappist",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    tropikal : {
        "name": "Tropikal",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    ustroke : {
        "name": "Ustroke",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    vercetti : {
        "name": "Vercetti",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    vollkorn : {
        "name": "Vollkorn",
        "fonts": [
            "200i",
            "800i",
            "800",
            "400i",
            "200",
            "600",
            "400",
            "600i",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    volumedealer : {
        "name": "VolumeDealer",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    wavehaus : {
        "name": "Wavehaus",
        "fonts": [
            "800",
            "400",
            "600",
            "200",
            "500",
            "100",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    werbedeutsch : {
        "name": "Werbedeutsch",
        "fonts": [
            "400",
        ],
        "tags": ["sans-serif"],
        "link": "",
        "creator": "",
        "creatorLink": "",
        "licence": "",
        "commercial": false,
        "open": false,
    },
    typefaceList : []
    }
  },
  mounted () {
    this.typefaceList = [
      this.archive,
      this.misto,
      this.mersad,
      this.planck,
      this.bizon,
      this.inter,
      this.resin,
      this.montrappist,
      this.hamletcicero,
      this.spacemono,
      this.imposible,
      this.grobedeutschmeister,
      this.theboldfont,
      this.leiko,
      this.harbinger,
      this.volumedealer,
      this.leaguegothic,
      this.blankenburg,
      this.newake,
      this.laborunion,
      this.tintin,
      this.bondi,
      this.tropikal,
      this.saintregus,
      this.arturito,
      this.overpassmono,
      this.banco,
      this.baldur,
      this.sonderregular,
      this.communenuitdebout,
      this.rafigen,
      this.mammutcat,
      this.envycoder,
      this.milkcarton,
      this.donjose,
      this.werbedeutsch,
      this.canobis,
      this.hamlettertia,
      this.forta,
      this.humane,
      this.wavehaus,
      this.catreporter,
      this.cherish,
      this.boston,
      this.surfingcapital,
      this.theater,
      this.ambidexter,
      this.marvinvisionsbig,
      this.vercetti,
      this.roboto,
      this.rousseaudeco,
      this.ustroke,
      this.axis,
      this.feastofflesh,
      this.lemonmilk,
      this.alvania,
      this.doppelganger,
      this.comictantrum,
      this.blazed,
      this.ribes,
      this.vollkorn,
      this.mdtall,
      this.hermanoaltoround,
      this.remboy,
      this.avara,
      this.mamenchisa,
      this.avenirnext,
      this.hermit,
      this.gulfsdisplay,
      this.margaret,
      this.mononoki,
      this.disket,
      this.leaguegothiccondensed
    ],
    this.typefaceList = this.typefaceList.sort((a, b) => {
      if (a.name < b.name) return -1
      if (a.name > b.name) return 1
      return 0
    } )
    this.selection = this.typefaceList
    this.alvania.tags = [this.taglist.display, this.taglist.comic]
    this.ambidexter.tags = [this.taglist.display, this.taglist.fancy]
    this.archive.tags = [this.taglist.display, this.taglist.allcaps]
    this.arturito.tags = [this.taglist.display]
    this.avara.tags = [this.taglist.display]
    this.avenirnext.tags = [this.taglist.neogro]
    this.axis.tags = [this.taglist.display, this.taglist.allcaps]
    this.baldur.tags = [this.taglist.display, this.taglist.artnouv, this.taglist.fancy]
    this.banco.tags = [this.taglist.display, this.taglist.allcaps, this.taglist.graphic]
    this.bizon.tags = [this.taglist.display, this.taglist.allcaps]
    this.blankenburg.tags = [this.taglist.display, this.taglist.goth]
    this.blazed.tags = [this.taglist.display, this.taglist.graphic]
    this.bondi.tags = [this.taglist.display, this.taglist.allcaps]
    this.boston.tags = [this.taglist.display, this.taglist.retro]
    this.catreporter.tags = [this.taglist.display, this.taglist.comic]
    this.canobis.tags = [this.taglist.display, this.taglist.fancy, this.taglist.artnouv]
    this.cherish.tags = [this.taglist.display, this.taglist.hand]
    this.comictantrum.tags = [this.taglist.display, this.taglist.comic, this.taglist.goth]
    this.communenuitdebout.tags = [this.taglist.display, this.taglist.condensed]
    this.communenuitdeboutpochoir.tags = [this.taglist.display, this.taglist.condensed]
    this.disket.tags = [this.taglist.display, this.taglist.allcaps]
    this.donjose.tags = [this.taglist.display, this.taglist.allcaps]
    this.doppelganger.tags = [this.taglist.display, this.taglist.fancy, this.taglist.artnouv]
    this.envycoder.tags = [this.taglist.mono]
    this.feastofflesh.tags = [this.taglist.graphic]
    this.forta.tags = [this.taglist.display, this.taglist.allcaps]
    this.grobedeutschmeister.tags = [this.taglist.goth]
    this.gulfsdisplay.tags = [this.taglist.display]
    this.hamletcicero.tags = [this.taglist.goth]
    this.hamlettertia.tags = [this.taglist.goth]
    this.harbinger.tags = [this.taglist.display, this.taglist.allcaps]
    this.hermanoaltoround.tags = [this.taglist.display, this.taglist.condensed]
    this.hermit.tags = [this.taglist.mono]
    this.humane.tags = [this.taglist.display, this.taglist.condensed]
    this.imposible.tags = [this.taglist.graphic]
    this.inter.tags = [this.taglist.neogro]
    this.kielo.tags = [this.taglist.display]
    this.laborunion.tags = [this.taglist.display, this.taglist.allcaps]
    this.leaguegothic.tags = [this.taglist.display]
    this.leaguegothiccondensed.tags = [this.taglist.display, this.taglist.condensed]
    this.leiko.tags = [this.taglist.serif]
    this.lemonmilk.tags = [this.taglist.display, this.taglist.allcaps]
    this.mdtall.tags = [this.taglist.display, this.taglist.allcaps, this.taglist.condensed]
    this.mamenchisa.tags = [this.taglist.graphic]
    this.mammutcat.tags = [this.taglist.graphic, this.taglist.comic]
    this.margaret.tags = [this.taglist.serif]
    this.marvinvisionsbig.tags = [this.taglist.display, this.taglist.allcaps]
    this.mersad.tags = [this.taglist.neogro]
    this.milkcarton.tags = [this.taglist.display, this.taglist.comic]
    this.misto.tags = [this.taglist.display, this.taglist.comic]
    this.montrappist.tags = [this.taglist.display]
    this.mononoki.tags = [this.taglist.mono]
    this.newake.tags = [this.taglist.display]
    this.overpassmono.tags = [this.taglist.mono]
    this.planck.tags = [this.taglist.display]
    this.rafigen.tags = [this.taglist.display]
    this.remboy.tags = [this.taglist.display, this.taglist.artnouv]
    this.resin.tags = [this.taglist.display, this.taglist.allcaps]
    this.ribes.tags = [this.taglist.display]
    this.roboto.tags = [this.taglist.neogro]
    this.rousseaudeco.tags = [this.taglist.display, this.taglist.fancy, this.taglist.artnouv]
    this.saintregus.tags = [this.taglist.display]
    this.sonderregular.tags = [this.taglist.display, this.taglist.fancy]
    this.spacemono.tags = [this.taglist.mono]
    this.surfingcapital.tags = [this.taglist.graphic]
    this.theboldfont.tags = [this.taglist.display, this.taglist.allcaps]
    this.theater.tags = [this.taglist.display, this.taglist.allcaps, this.taglist.condensed]
    this.tintin.tags = [this.taglist.display, this.taglist.comic]
    this.tropikal.tags = [this.taglist.display, this.taglist.fancy]
    this.ustroke.tags = [this.taglist.graphic]
    this.vercetti.tags = [this.taglist.neogro]
    this.vollkorn.tags = [this.taglist.serif]
    this.volumedealer.tags = [this.taglist.graphic]
    this.wavehaus.tags = [this.taglist.neogro]
    this.werbedeutsch.tags = [this.taglist.goth]
    //this..tags = [this.taglist.]
  }
}).$mount('#root')