1487 lines
35 KiB
JavaScript
1487 lines
35 KiB
JavaScript
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" : [
|
|
"400",
|
|
"400i",
|
|
"800",
|
|
"800i",
|
|
],
|
|
"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')
|