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:
- fontname-webfont.eot,
- fontname-webfont.svg,
- fontname-webfont.ttf,
- fontname-webfont.woff,
- 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.
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. Metropolis
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. Pacifico
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, de mest trendiga teckensnitten att använda enligt Lifehack inkluderar Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni och Didot.
Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? 😉
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!
Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.
