🐿️ Font Squirrel - 25 populära typsnitt + hur man lägger till på en webbplats [5 steg]

Tack vare webbplatser som Font Squirrel kan du använda vilken typ eller typsnitt du vill på en webbplats. Alternativ var tidigare begränsade till några vanliga webbteckensnitt som alla var tvungna att använda. Idag finns det många fler alternativ tillgängliga. Du är inte längre begränsad till några få webbkompatibla teckensnitt. Nu kan teckensnitt laddas ner direkt genom att komma åt en webbplats.

Webbplatser som Font Squirrel, med tillgång till hundratals och tusentals objekt är mycket populära. Det är webbgenerator för teckensnitt som gör det enklare än någonsin att använda inlägg från tredje part såväl som samlade skapelser.

I stället för att använda vanliga typsnitt som Arial, Calibri och Helvetica Neue kan vi använda CSS @ font-face-regeln. Detta gör att vi kan använda alla teckensnitt utan att behöva installera det på besökarens enheter. Detta är ett utmärkt alternativ som ger uttrycksfriheten för webbdesignern och maximal användbarhet för användaren.

Läs mer: Hur man lär sig CSS (Smashing Magazine)

Detta har gjort det extremt enkelt att lägga till Font Squirrel och andra typsnitt du väljer till din webbplats.

I denna handledning ska vi visa dig hur du använder Font Squirrel på din webbplats. Du kan använda samma koncept för att lägga till vilken typsnitt som helst på din webbplats inklusive FontAwesome. 

Lägg till Font Squirrel på din webbplats

1. Hitta det FontSquirrel-teckensnitt du vill ha

• Besök Font ekorre och välj Sök för att söka efter teckensnittet du vill lägga till.
• Välj den du vill använda på din webbplats som en del av din webbdesign. Du kan använda de olika kategorierna för att hitta typsnittet du vill använda, hitta de mest populära, nyligen tillagda, heta eller trendiga tilläggen. Det finns tusentals att välja mellan. Välj den som fungerar bäst för det projekt du arbetar med.

2. Ladda ner Font Squirrel WebFont-kit

• När du har valt teckensnittet du vill använda klickar du på knappen WebFont Kit längst upp till höger på skärmen.
• Klicka på Ladda ner @ font-face kit.

 Nedladdningen kommer att innehålla en zip-fil med ett antal filer, inklusive hur man använder webbteckensnittet, alla licenser som är associerade med denna typsnitt för teckensnitt ekorre och naturligtvis själva filen.

3. Ladda upp Font Squirrel-filerna till din webbplats

• Extrahera filen - Den extraheras till en mapp med namnet på det objekt du valde.
• Ladda upp ALLA filerna till CSS-mappen på din webbplats. Du kommer att ha ett antal filer som du behöver ladda upp inklusive:

1. fontname-webfont.eot,
2. fontname-webfont.svg,
3. fontname-webfont.ttf,
4. fontname-webfont.woff,
5. stilark.css

4. Lägg till typsnittet i ditt CSS-formatmall

Det sista steget varierar lite beroende på hur typsnitt används på din webbplats. Du hittar dina typsnittsdefinitioner i CSS-filen. Filen ska anropas stilark.css. Du bör hitta CSS-filen som används på din webbplats och lägga till Font Squirrel-filerna där med hjälp av följande. Lägg till följande i din stylesheet.css-fil och ersätt:

@font-face {
    font-family: 'FontName';
    src: url('FontName-webfont..eot');
    src: url('FontName-webfont..eot?#iefix') format('embedded-opentype'),
        url('FontName-webfont.woff') format('woff'),
        url('FontName-webfont.ttf') format('truetype'),
        url('FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Om du har laddat upp teckensnitten till TYPES-mappen ändras koden mycket till:

@font-face {
    font-family: 'FontName';
    src: url('types/FontName.eot');
    src: url('types/FontName.eot?#iefix') format('embedded-opentype'),
        url('types/FontName-webfont.woff') format('woff'),
        url('types/FontName-webfont.ttf') format('truetype'),
        url('types/FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

5. Ändra CSS-deklarationerna för att använda de tillagda FontSquirrel-objekten 

När du har lagt till deklarationerna ovan i stilarket måste du redigera det lite mer för att faktiskt använda typsnittet. När du har lagt till ovanstående kod måste du redigera stilformatet för att använda de nya typerna du har lagt till.

Gör detta genom att ändra teckensnittsfamiljen till namnet på det alternativ du valt. Om du till exempel vill använda den nya typen med dina rubriker - hitta CSS för rubriken och ändra den därefter. 

Uppdatera CSS-deklarationen med FontSquirrel-namnet du har laddat ner.

h1,h2,h3,h4,h5,h6 {
    color: #444;
    text-decoration: none;
    font-family: 'FontName', sans-serif;
}

 Naturligtvis kan du använda teckensnittsfamiljen i vilken CSS-tagg du behöver!

Om du har följt alla ovanstående steg korrekt bör du ha det nya Font Squirrel-teckensnittet som du just lagt till på din webbplats när du har laddat om stilarket.

Om inte, ta bara upp webbläsarens utvecklarverktyg för att kontrollera om alla filer har åtkomst korrekt. Om inte, kontrollera din CSS igen för att se till att du stavade teckensnittsnamnet korrekt. 

Kolla in hur du gör detta som YouTube-video och hur man ändrar teckensnitt i valfritt WordPress-tema.

25 mest populära typsnitt på Font Squirrel

Om du letar efter inspiration för ett teckensnitt att använda, här är de 25 hetaste teckensnitten på Font Squirrel just nu.

1. montserrat

Montserrat är ett modernt urbana teckensnitt som finns i flera vikter. Det fungerar på nära håll och på avstånd och kan fungera bra på webben.

https://www.fontsquirrel.com/fonts/montserrat

2. öppna Sans

Open Sans borde inte behöva introduceras. Det är ett av de mest populära teckensnitten i världen och är rent, modernt och flexibelt.

https://www.fontsquirrel.com/fonts/open-sans

3. roboto

Roboto är ett annat oerhört populärt webbteckensnitt tack vare dess rena linjer, otydligt utseende och flexibilitet.

https://www.fontsquirrel.com/fonts/roboto

4. Raleway

Raleway liknar Roboto i utseende men är också unik. Ett annat rent och lätt teckensnitt som skulle fungera bra i alla situationer.

https://www.fontsquirrel.com/fonts/raleway

5. Lato

Lato har funnits i nästan tio år tack vare dess effektivitet, moderna utseende och stora balans.

https://www.fontsquirrel.com/fonts/lato

6. tapeter Gratis Neue

Bebas Neue är en tolkning av det ursprungliga Bebas Neue-teckensnittet av Ryoichi Tsunekawa. Det är ett mycket attraktivt typsnitt som är oerhört populärt.

https://www.fontsquirrel.com/fonts/bebas-neue

7. Vallmo

Poppins är ett lätt och bekymmersfritt typsnitt med stor balans. Det är också helt modernt, vilket betyder att det kan fungera i många mönster.

https://www.fontsquirrel.com/fonts/poppins

8. Fantastiska vibbar

Great Vibes är ett flytande typsnitt i handstilstil som fortfarande är läsbart på olika skärmstorlekar. Detta lämpar sig väl för att användas på exklusiva mönster.

https://www.fontsquirrel.com/fonts/great-vibes

9. Alex Brush

Alex Brush är ett annat flytande handskrivet borsteskript som är läsbart på olika skärmstorlekar. Det är en mer avslappnad uppfattning om temat med bestämd överklagande.

https://www.fontsquirrel.com/fonts/alex-brush

10. Kvicksand

Quicksand är lätt och nyckfull och har en luftig känsla om det. En blandning av modern och nyckfull, teckensnittet kan vara perfekt i en rad webbdesigner.

https://www.fontsquirrel.com/fonts/quicksand

11. Oswald

Oswald är ett tyngre, mer eftertryckligt teckensnitt som har stor läsbarhet på olika avstånd. Det är också otrevligt och modernt som fungerar bra.

https://www.fontsquirrel.com/fonts/oswald

12. Källa utan Pro

Source Sans Pro är en utveckling av ett av Adobes första typsnitt med öppen källkod. Det har modifierats och förbättrats stadigt, med detta som ett av de bästa exemplen.

https://www.fontsquirrel.com/fonts/source-sans-pro

13. Playfair Display

Playfair Display är ett mer traditionellt typsnitt med en modern twist. Den är välbalanserad och kan fungera i alla slags situationer.

https://www.fontsquirrel.com/fonts/playfair-display

14. Milkshake

Milkshake är ett tyngre typsnitt med ett amerikanskt tema. Den ritades ursprungligen med en pensel innan den förvandlades till ett typsnitt.

https://www.fontsquirrel.com/fonts/milkshake

15. Kaushan-skript

Kaushan Script har ett asiatiskt element som framkallar visioner om Saigon på 1930-talet. Det är ett trevligt typsnitt med bred överklagande.

https://www.fontsquirrel.com/fonts/kaushan-script

16. Chunkfive

Chunkfive är ett beskrivande namn för detta tjocka teckensnitt. Det är ett djärvt typsnitt som påverkar och kan fungera bra för rubriker eller rubriker.

https://www.fontsquirrel.com/fonts/chunkfive

17.Amatic

Amatic påminner om svarta tavlor eller The Simpsons har ändå en helt egen karaktär. Det skulle kunna fungera bra less formella webbplatser.

https://www.fontsquirrel.com/fonts/amatic

18. Allura

Allura är ett annat flytande handskrivet teckensnitt som är mycket behagligt för ögat. Noggrant övervägande kan göra stor användning av detta typsnitt.

https://www.fontsquirrel.com/fonts/allura

19. Spartansk liga

League Spartan är ett no-nonsense-teckensnitt som har mycket närvaro. Det kan fungera perfekt som en rubrik eller inom en uppmaning till handling.

https://www.fontsquirrel.com/fonts/league-spartan

20. Metropol

Metropolis är ett modernt geometriskt typsnitt som uppenbarligen har påverkats av några av de mer populära typsnitten. Detta är en fantastisk tolkning.

https://www.fontsquirrel.com/fonts/metropolis

21. Stilla havet

Pacifico är ett lättsamt flytande typsnitt som framkallar tankar om Pepe-jeans och 1960-talets Amerika. Det är ett effektivt typsnitt i en arvsmiljö.

https://www.fontsquirrel.com/fonts/pacifico

22. Aller

Aller är en ren, ljus och modern design vars angular utseende lämpar sig väl för modern webbdesign.

https://www.fontsquirrel.com/fonts/Aller

23. Josefin Sans

Josefin Sans lyckas kombinera modernitet med arv och kan vara ett mycket flexibelt typsnitt i ett stort utbud av mönster.

https://www.fontsquirrel.com/fonts/josefin-sans

24. Black Jack

Black Jack är ett flytande typsnitt med ett informellt utseende. Det kan fungera bra i avslappnade, komiska eller avslappnade mönster.

https://www.fontsquirrel.com/fonts/blackjack

25. Hummer

Hummer ser ut som ett varumärke, kanske New England eller någonstans vid havet. Ett bra typsnitt att använda om designen passar.

https://www.fontsquirrel.com/fonts/Lobster

Vanliga frågor

Vad är Font Squirrel?

Font Squirrel är ett arkiv med webbteckensnitt som kommer från skapare med fri och öppen källkod. Alla teckensnitt kan laddas ner och användas gratis, även kommersiellt.

Hur laddar jag ner webbteckensnitt från Font Squirrel?

Det är enkelt att ladda ner webbfonter från Font Squirrel. Identifiera teckensnittet du vill använda, ladda ner filen som innehåller teckensnittet. Ladda upp filerna till din webbhotell och inkludera teckensnittsnamnet i ditt stylesheet.css. Testa sedan för att se till att ditt teckensnitt laddas.

Vad är det mest populära typsnittet just nu?

Det mest populära teckensnittet just nu är Helvetica. Enligt Wired är Helvetica det mest populära teckensnittet i världen trots att det är 62 år gammalt.

Vad är det mest trendiga teckensnittet att använda?

Bortsett från Helvetica inkluderar de mest trendiga typsnitten att använda enligt Lifehack Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni och Didot.

Hur använder man font squirrel?

När du har laddat ner typsnittet du vill använda kan du ladda upp det till din webbplats och sedan skapa CSS med typsnittet enligt instruktionerna ovan för att inkludera detta typsnitt på din webbplats.

Om författaren

Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/e-post: david@collectiveray.com

David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.