đŸżïž Font Squirrel - 25 populĂ€ra typsnitt + hur man lĂ€gger till pĂ„ en webbplats [5 steg]

teckensnitt ekorre

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.

 hitta teckensnitt ekorrteckensnitt

 

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.

fontsquirrel nedladdning webfont kit

 

fontsquirrel 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

 

font ekorre ladda upp filer

 

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. 

hitta den aktuella teckensnittsfamiljen

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. 

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

montserrat

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

öppna Sans

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

roboto

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

Raleway

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

Lato

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

tapeter Gratis Neue

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

Poppins

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

Stora Vibes

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

Alex Brush

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

Kvicksand

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

Oswald

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

KĂ€lla Sans Pro

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

Playfair Display

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

milkshake

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

Kaushan-skript

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

chunkfive

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

Amatic

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

Allura

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

Liga Spartan

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

Metropol

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

Pacific

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

aller

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

Josefin Sans

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

Black Jack

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

Hummer

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.

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
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
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.

En sak till... 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.

Författare Utvalda pÄ:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och mÄnga fler ...