Användarhandbok Avbryt

Lägg till teckensnitt på din webbplats

Webbteckensnitt från Adobe Fonts kan användas på dina webbplatser, i e-postkampanjer i HTML-format, i artiklar i Googles AMP-format samt många andra projekt där webbteckensnitt stöds.

Webbtjänsten Adobe Fonts kräver att webbteckensnitt används genom inbäddningskoden som tillhandahålls. Användningsvillkoren tillåter inte att du själv hanterar webbteckensnittsfilerna eller överför dem till en plattform för webbplatsdesign.

Välj teckensnitt att använda

Börja med att botanisera i teckensnittsbiblioteket. Du kan välja vilket språkstöd du behöver på rullgardinsmenyn SPRÅK OCH SKRIFTSYSTEM.

Teckensnittets webbgränssnitt visas med språkinställningarna markerade
Välj språk- och skriftsystemsmenyn för att se menyn för teckensnittens språkfilter

Lägg till taggar eller filter för att krympa teckensnittslistan. Använd våra taggar skrivna på naturligt språk för att botanisera bland teckensnitt som passar ditt projekts stämning eller filtrera efter klassificering (t.ex. serif eller sanserif), egenskaper (x-höjd, bredd eller vikt) eller språk. 

Botanisera bland Adobe Fonts-taggar

Skapa ett webbprojekt

När du hittar ett teckensnitt du gillar kan du klicka på knappen </> och lägga till familjen i ett webbprojekt.

en bild av teckensnittet Gilbert och alternativet Lägg till familj är markerat

Du kan även klicka på teckensnittsnamnet för att öppna familjesidan och se alla bredder och stilar som är tillgängliga. Klicka sedan på </> Lägg till i webbprojekt längst upp på sidan för att lägga till familjen i ett webbprojekt.

lägga till teckensnittsfamiljer och välja stil och teckensnittsvikt från teckensnittswebbplatsen

Ge webbprojektet ett namn i fönstret Lägg till teckensnitt i ett webbprojekt och bestäm vilka teckensnitt som ska inkluderas.

  1. Klicka på menyn och välj Skapa ett nytt projekt
  2. Ge webbprojektet ett namn
  3. Välj de bredder och stilar på teckensnittet som du vill inkludera med kryssrutornas hjälp.
  4. Skapa projektet.

Du kan också ändra projektinställningarna senare via sidan Hantera teckensnitt.

En bild av ett popup-fönster där teckensnitt har valts och ska läggas till i ett nytt projekt från teckensnittswebbplatsen

Därefter får du inbäddningskoden för att läsa in teckensnitten på din webbplats. De olika alternativen förklaras på inbäddningskodens hjälpsida, och standardinbäddningskoden fungerar utmärkt för de flesta projekt.

Kopiera inbäddningskoden och lägg till den i taggen <head> på webbplatsen.

Inbäddningskoden för teckensnitt visas i bilden tillsammans med teckensnittsstilarna

Klicka på Klar för att stänga webbprojektfönstret och fortsätta surfa.  Klicka på knappen </> på en annan teckensnittsfamilj för att lägga till fler teckensnitt i projektet och välj sedan projektets namn på menyn (i stället för Skapa ett nytt projekt).

Anpassa webbprojektet

Ditt webbprojekt och alla teckensnitt du har lagt till står under Hantera teckensnitt.

Klicka på knappen Redigera projektet för att ändra vilka bredder och stilar som ingår, ta bort en webbteckensnittsfamilj helt från projektet eller ange en font-display-inställning. Du kan också ändra teckenuppsättningen i webbprojekteditorn, som anger projektets språkstöd.  

Östasiatiska teckensnitt måste användas med dynamiska delsuppsättningar, medan andra teckensnitt har språkbaserade deluppsättningsalternativ: Standard, Alla tecken eller en anpassad språkdeluppsättning. På hjälpsidan Språkstöd och deluppsättningar finns det mer information om de olika alternativen.

Du kan ta med valfria OpenType-funktioner i projektet genom att markera rutan OpenType-funktioner. Om du markerar rutan visas även en lista med funktioner som är tillgängliga för den specifika webbteckensnittsfamiljen, t.ex. ligaturer, alternativa tecken eller kapitäler.

Med Teckensnittsvisning kan du ange hur webbteckensnitt läses in i webbläsaren och tillämpas på webbplatsen. Mer information om dessa alternativ finns på hjälpsidan om inställningar för font-display.

När du har konfigurerat projektet som du vill ha det ska du klicka på Spara ändringar för att spara projektet. Uppdateringarna kommer att bli tillgängliga på din webbplats inom några minuter.

Använd teckensnitten i din CSS-kod

På sidan Webbprojekt anges CSS-font-family-namnet, den numeriska vikten och teckensnittsstilen för varje teckensnitt i projektet. Använd dessa font-family-namn i CSS-koden för att tillämpa teckensnitten på texten.

wp-page

Få hjälp snabbare och enklare

Ny användare?