Hur man lägger till teckensnitt ekorre typsnitt och typer på din webbplats i 5 enkla 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

League 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. 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

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, de mest trendiga teckensnitten att använda enligt Lifehack inkluderar Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni och Didot.

 

 

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 ...