Share
I denna handledning kommer jag att visa dig hur du använder webbfonter i dina Adobe Muse-projekt. Vi täcker teckensnittalternativ som erbjuds i webbtypkatalogen, inklusive Google Web Fonts och teckensnitt som är värd för dig själv.
Vi tittar också på hur Adobe Muse hanterar typ som kan inte görs med webbfonter, så låt oss börja!
Ladda ner videoklippet eller prenumerera på Tuts + Web Design på Youtube.
Hej, där och välkommen tillbaka på Tuts + för en ny handledning om Adobe Muse. Jag är Michael Chaize och jag ska visa dig hur du kan använda webbfonter i dina projekt. Så med Adobe Muse kan du välja ett textblock, och med hjälp av Textverktyget kan du självklart definiera typsnittet som du vill använda i ditt design.
Du kan använda webbsäkra teckensnitt, som är en lista över teckensnitt som är installerade som standard i alla webbläsare, men dessa är teckensnitt definierade av Microsoft 1996. Så kanske du vill lägga till lite roligt och kreativitet i din design med webben typsnitt. Så om du säger att du vill lägga till webbfonter, kan du komma åt katalogen Adobe Edge Web Fonts.
Så det här är en katalog över gratis webbfonter, det innehåller faktiskt alla Google-webbfonter och det är värd för Adobe. Så du kan exempelvis säga att du vill använda Aladdin, så du bara kolla på det, du trycker på OK, och det kommer att lägga till Aladdin till din lista över teckensnitt.
Nu kan du gå tillbaka och säga att du vill använda Aladdin. Så när du publicerar din sida och sedan kontrollerar den i webbläsaren kan du se att jag kan välja texten. Detta är riktig text på webben.
Varför säger jag det här till dig? För om du vill använda en typsnittfamilj som bara är installerad på din dator, här är vad som händer. Så, jag väljer min text och jag bläddra i mina teckensnitt på min dator. Och låt oss säga att jag vill använda mistral. Du kommer att se en ny ikon visas på din skärm.
Det betyder att den här teckensnittet är installerat på datorn, vilket är bra. Men det betyder inte att du kan använda den på webben, det är inte ett webbfont och du kanske inte har en licens att använda den på webben. Så det är därför Adobe Muse, när du publicerar din sida, kommer att konvertera den till HTML. Det tar texten och konverterar den till en bild. Så nu kan jag inte välja texten, okej. Det är en bild. Och du förstår, det är inte skarpt och för sökmotoroptimering är det inte bra. Eftersom Google-roboten inte kommer att kunna analysera innehållet i denna text.
Så av flera anledningar är det inte något du vill göra. Kanske kan det vara användbart ibland för en titel. Okej, du vill behålla utseendet på teckensnittet. Det är okej. Men det finns så många webbfonter tillgängliga på webben. Så, jag ska visa dig hur du kan använda någon form av webbfont med rätt licens för webben.
Så, om du går tillbaka till webbfontsmenyn kan du komma åt katalogen för Edge Web Fonts. Det finns mer än 500 teckensnitt. Jag menar det är mycket.
Eller du kan använda självhäftande webbfonter. Adobe Muse behöver WOFF, EOT eller SVG-filer som är öppna standarder för att beskriva teckensnitt på webben för en webbläsare. Så låt mig visa dig vad du kan göra. Jag kommer bara att välja en webbplats som innehåller gratis teckensnitt för kommersiellt bruk, vilket är Font Ekorre.
Vad jag tycker om Font Ekorre är att du enkelt kan filtrera innehållet i katalogen och säga att jag vill ha ett teckensnitt som jag kan installera och använda på skrivbordet, men också på min hemsida.
Så jag kommer att kolla webbtypfiltret här. Och då kan du självklart välja en kategori, en klassificering. Så jag behöver Slab Serif typsnitt och det ser fint ut, så jag laddar ner filen.
Så jag har fet, fet kursiv, kursiv och vanlig, så jag installerar regelbundet på mitt skrivbord. Jag dubbelklickar och installerar teckensnittet. Nu kan jag använda den på min Adobe Muse-sida, men som du kan gissa kommer den att fungera som Mistral, så som ett systemfont.
Så jag går tillbaka och väljer Bitter. Okej, jag har den i Muse men det kommer att konverteras till en bild, och det här är inte vad jag vill ha. Jag vill använda Bitter som ett webbfont. Så igen är frågan här det, när du går tillbaka hit, Lägg till webbfonter.
Det väntar på WOFF-filer eller EOT-filer. Så på Font Ekorre finns en gratis tjänst som heter Web Font Generator, som du kan använda.
Så ska jag lägga till teckensnitt. Det kommer att ladda upp teckensnittet, då klickar jag på Ladda ner ditt kit. Och det kommer att skapa en ny zip-fil för mig, vilken den här gången kommer att innehålla webbfonter.
Okej. Så det här är den nya mappen, och nu har jag en EOT-fil, SVG, WOFF. Så, jag kan använda den i Adobe Muse. Så om vi går tillbaka till Adobe Muse kan jag nu Bläddra i min dator och välja den här nya mappen som innehåller WOFF, EOT och SVG-filer.
Men igen, jag kolla rutan, bara för att bekräfta att jag har en riktig licens, jag kan använda den på webben. Och Adobe Muse kommer automatiskt att göra matchen med den bittera teckensnitt som är installerad på mitt system. Okej. Så det är mycket viktigt för Muse eftersom i skrivbordsprogrammet använder jag systemfonten och en gång på webben kommer den att använda dessa uppsättningar av teckensnitt.
Jag publicerar sidan. Vi märker att det här är text okej. Så här kan du lägga till webbfonter direkt i Adobe Muse. Och vi vet alla, att typografi är avgörande för webbdesign. Och det finns så många webbfonter tillgängliga. Jag tycker att det är ett bra tillägg.
För en mer detaljerad titt på Adobe Muse ta en titt på min gratis kurs Designing and Publishing Websites med Adobe Muse.
Accentsconagua