Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Använd vilka typsnitt du vill med font face

Detta är ett tips som tyvärr inte fungerar i Firefox i dagsläget vad jag vet, därför är det viktigt att man har ett ”backup”-typsnitt. Det betyder att man gör såhär:

font-family: 'Ditt typsnitt', Arial, sans-serif;

Detta betyder att om webbläsaren inte kan läsa ”Ditt typsnitt” (alltså det som du ska importera via @font-face enligt videon ovan) så kommer den ta nästa i ledet vilket i det här exemplet är Arial, men man kan också välja vilket globalt typsnitt som helst där (till exempel Tahoma, Verdana etc. – de typsnitt som alla webbläsare kan läsa helt enkelt) och om det inte kan läsas så tar webbläsaren ett sans-serif-typsnitt. I vilket fall; det här tipset fungerar i Chrome, och det är möjligt att det är den enda webbläsaren som stödjer denna CSS-funktion för tillfället. Det bästa är alltså att göra ett backup-typsnitt och backa upp typsnittet med ett relativt likt typsnitt från Google Fonts.

Här är länken till Tumblr (det krävs att du har ett konto på Tumblr för att kunna ladda upp via denna sida).

Stilmallskoden:

@font-face {
  font-family: "typsnittets namn";
  src: url('ttf-filen som du laddar upp via t.ex. tumblr');
}

Det du döper ditt typsnitt till (det du skriver istället för ”typsnittets namn”) är det namnet du sedan använder under exempelvis h3. Här följer ett exempel på hur font-family-raden skulle se ut:

font-family: 'Stars in our eyes', 'Satisfy', cursive;

I detta exemplet har jag då valt att importera Stars in our eyes via @font-face och sedan har jag importerat Satisfy med Google Fonts, och om webbläsaren mot förmodan inte ens kan läsa ett typsnitt från Google Fonts så tar webbläsaren ett annat kursivt typsnitt.

Tips:
Detta tips är mindre krävande än till exempel cufón-tipset då det inte är ett script som kan sega ner sidan, och du har oändligt många mer typsnitt att välja mellan än om du använder Google Webfonts. Detta tips är väldigt lätt att använda, om du frågar mig!
Tänk på att försöka hitta ett typsnitt som funkar med åäö. På exempelvis dafont.com kan du skriva en exempeltext för att se hur typsnittet ser ut med olika bokstäver, sammansatta. @font-face är tyvärr inte ett kommando som stöds av alla webbläsare, således kan det vara så att till exempel Firefox & Internet Explorer inte stödjer funktionen. Om du väljer att använda det ändå är upp till dig, men se då till att det är ett hyfsat snyggt typsnitt som backar upp ditt externa.
Sist men inte minst; du kan göra hur många du vill, men tänk på att inte blanda för många typsnitt; det kan irritera läsaren.

 

Från filmen:

Använd font face för att importera externa typsnitt

Hallå hallå.

I min bloggtipsblogg så har ju jag rubriker som har typsnittet Caviar Dreams. Det är ett typsnitt som inte är ett standard typsnitt på de flesta datorer och som ni vet när man har standard, eller när man inte använder standard typsnitt eller man till exempel vill använda någonting från dafont.com, alltså ett typsnitt, är det som så att man behöver skriva lite koder för det.

 

Idag så tänkte jag ge er ett kort litet väldigt väldigt användbart tips till detta där man inte behöver göra mycket alls. Det är inget krångligt att man som på …(hör inte vad Sanna säger) måste göra om det till javascript och javascript segar ju också ner din blogg så därför så tycker jag att det här är ett mycket mycket bättre tips. Det heter font-face kort och gott.

 

Så mina vänner, då gör vi som så att vi går in på dafont, hittar ett typsnitt som vi kanske skulle vilja använda. Jag tar bara det första här, vi trycker på download. Vi gör väl så att det här nu ligger i en zip-fil precis som det här gör så måste vi packa upp zip-filen. Se till att det ligger i en TFF-fil, TTF kanske det heter. Vi ser här inom kort. Ska vi se här, sådär så kollar vi. Ja, där är TTF hette det, förlåt. Ni gör precis som ni vill men jag brukar göra som så att jag lägger ut den på skrivbordet bara så att jag vet vart jag har den.

 

Sedan så går vi in på en annan sjukt användbar sida som heter tumblr, som ni säkert vet vilken det är och det är ju den här sidan som heter upload static file som vi ska in på. Ska vi se, så. När man laddar upp filer på den här sidan så måste man vara medlem på tumblr och det blir man helt gratis och det är bara att logga in på tumblr och göra en användare helt enkelt.

 

Vi väljer våran lilla TTF-fil, ska vi se. Där ja. Så. Laddar vi upp den, upload file. Sen så har ni ju min fina lilla kod här då va. Vi gör som så att ska jag visa detta på en annan sida så att ni ser hur fint det blir. Man går in i stilmallen med den här koden och lägger den förslagsvis högst upp. Den här koden går att använda flera gånger, jag kan alltså göra flera olika om jag skulle vilja det, men nu tänkte jag bara visa hur man gör en. Men det är samma princip på allting.

 

Vad hette nu det här scriptet, jo det hette Penabico. Vet inte om jag uttalade det rätt men det bryr jag mig inte om. Så då så skriver jag här där det står namn, Penabico. Sen så tar jag den här, your file is available at, så tar jag den här länken som uppstod när jag laddade upp filen. Som sagt, viktigt att det är TTF-filen och inget annat. Kopierar den och så lägger jag den där det står länk från tumblr. Sen är det bara att spara och när vi då går in så kommer ni se att ingenting har förändrats och det beror ju helt enkelt på att jag har ju inte bestämt vad på min blogg som ska styras utav den här font-face. Men det är helt enkelt så lätt att man bara kan välja, man har ju döpt den här till nånting där man skrev namn, alltså font-family Penabico skrev ju jag där då. Då kan jag bara scrolla ner här till till exempel h3, alltså rubrikerna. Där hade vi dem. Skriver jag här, Penabico. Förhandsgranskar vi, och nu syns inte den, jo där. Då ser ni att då funkar den.

 

Då kan man ju givetvis behöva ändra lite på vad det ska vara för, vad heter det, storlek på den och allting. Vi provar med 42 istället för 22 och då syns den lite bättre. Det här är ett skitbra tips. Inga script, ingenting utan bara stilmall helt enkelt. Bara kod. Gör så att min sida inte segas ner eller nånting och väldigt användbar. Syns i alla webbläsare vad jag vet. Syns däremot inte på gamla datorer, men det beror ju på att de är gamla, det är ju ingenting annat och då syns inte något, syns inte som att det finns någon kod eller något script som syns på gamla datorer.

 

Det var det jag skulle visa er idag så ni får ha en fortsatt trevlig kväll här. Ha det gott. Hej hej.

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

4 comments

  1. Svaraelin

    Hej! Skulle inte du kunna börja med design-tips för devote-bloggar? Skulle vara SÅ kul! Känns som att allt fler och fler startar sina bloggar där, dock finns inga design-bloggar där man kan hämta tips osv. Tack på förhand!


    1. Author
      SvaraSanna Preifelt

      Självklart, det står på min att-göra-lista. Finns det något specifikt du vill veta? 🙂

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *