- +

+ +

`, + mounted() { + if (this.family.axes.length !== 0) { + this.$el.children[1].animate(this.family.toAnimation(), { duration: 1000, iterations: Infinity, direction: 'alternate' }); + } + }, methods: { edited() { this.$emit('edited', this.family); @@ -229,7 +236,7 @@ return this.$root.familyPangram(this.family); }, familyStyle() { - return `font-family: "${this.family.name}", "Adobe NotDef"; font-size: 32pt;`; + return `font-family: ${this.family.name}; font-size: 32pt;`; }, familyDisplayName() { return this.family.displayName; @@ -310,10 +317,10 @@ const seen = new Set(); let res = []; for (let family of this.tags) { - if (seen.has(family.name)) { + if (seen.has(family.displayName)) { continue; } - seen.add(family.name); + seen.add(family.displayName); res.push(family); } return res; @@ -425,6 +432,16 @@ // Remove all axis inputs for the next family this.newAxes = []; + // display results correctly by ensuring fonts are correct + // update fonts + const fonts = document.getElementById("fonts").children + const newUrl = newFamily.toUrl(); + for (let i = 0; i < fonts.length; i++) { + if (newUrl.includes(fonts[i].href)) { + fonts[i].href = newFamily.toUrl(); + } + } + }, copyFamily() { this.isEdited = true; @@ -550,4 +567,3 @@ src: url(https://cdn.jsdelivr.net/gh/adobe-fonts/adobe-notdef/AND-Regular.ttf); } - \ No newline at end of file