Vue.component('fontdemo', {
template: `
`,
props: ['typeface'],
data() {
return {
isCopied: false,
linkText: ''
}
},
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;
});
}
}
})
let vm = new Vue({
methods: {
updateSelectedTags(tag) {
if (this.selectedTags.includes(tag)) {
this.selectedTags.splice(this.selectedTags.indexOf(tag), 1);
} else {
this.selectedTags.push(tag);
}
this.updateSelection();
},
add2selection(tag) {
this.typefaceList.forEach(typeface => {
if (typeface.tags.includes(tag)) {
this.selection.push(typeface);
}
})
console.log(this.selection);
},
updateSelection() {
this.selection = [];
this.typefaceList.forEach(typeface => {
if (this.selectedTags.every(v => typeface.tags.includes(v))) {
this.selection.push(typeface);
}
})
console.log(this.selection);
}
},
data() {
return {
testText: "The quick brown fox jumps over the lazy dog",
selection : [],
selectedTags: [],
alvania : {
"name": "Alvania",
"fonts": [
"400",
],
"tags": ["display","comic"],
"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": ["display", "fancy"],
"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,
},
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.imposible,
this.grobedeutschmeister,
this.theboldfont,
this.leiko,
this.harbinger,
this.kielo,
this.volumedealer,
this.leaguegothic,
this.blankenburg,
this.newake,
this.laborunion,
this.tintin,
this.bondi,
this.tropikal,
this.saintregus,
this.arturito,
this.monolith,
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.nim,
this.hamlettertia,
this.forta,
this.trappist,
this.humane,
this.wavehaus,
this.catreporter,
this.cherish,
this.boston,
this.surfingcapital,
this.theater,
this.montreau,
this.ambidexter,
this.marvinvisionsbig,
this.vercetti,
this.roboto,
this.rousseaudeco,
this.ustroke,
this.axis,
this.feastofflesh,
this.lemonmilk,
this.alvania,
this.communenuitdeboutpochoir,
this.doppelganger,
this.comictantrum,
this.blazed,
this.refuse,
this.ribes,
this.quakep,
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
}
}).$mount('#root')