Roboto-teckensnittet är en ny uppsättning sans-serif-teckensnitt som skapats av Google för Android 4.0 Ice Cream Sandwich-plattformen. Det är en fin och elegant typsnitt som fungerar bra på högupplösta skärmar som dina Android-telefoner och -tabeller. Den innehåller den fullständiga uppsättningen typsnittsvikt (innehåller vanliga, fet, kursiv och fet kursiv vikt) och används huvudsakligen för systemprogram och alla Google-appar. Detta är också det första steget av Google att förena plattformen och minska problem med UI-fragmenteringen.

För dem som älskar typsnittet och vill använda det på sina applikationer som Microsoft Word, Pages, Photoshop, Gimp eller till och med på deras hemsida, har Google vänligen släppt teckensnittet gratis och du kan nu använda det utan några begränsningar (under Apache-programvarulicensen).

Så här kan du använda det (nästan) överallt.

1. Först, gå till Roboto-typsnittet och ladda ned teckensnittet (zip-fil).

2. Ta ut den zippade filen. Du ska se en mapp som heter "Roboto_Hinted_20111129". Öppna mappen och du ska se alla roboto-teckensnitt (i (under Apache-programvarulicensen). (Enligt Apache-programvarulicensen). (Under Apache-programvarulicensen) .vikt) i .ttf-format.

För Linux (Ubuntu):

Öppna din hemmapp och aktivera alternativet att visa dolda filer / mappar. Leta reda på mappen " .fonts ". Om det inte existerar, skapa det. Därefter flyttar du Roboto typsnitt mappen till denna " .fonts " -mappen .

Starta om din LibreOffice, GIMP, Photoshop eller vilken applikation du använder. Du borde se Roboto-teckensnittet tillgängligt för val.

För Windows

Öppna mappen Roboto typsnitt. Välj alla teckensnitt. Högerklicka på musen och välj "Installera".

Detta kommer att installera typsnitt till din Windows-maskin. Du kan nu använda Roboto-teckensnittet i dina applikationer.

För Mac

Dra helt enkelt alla Roboto-teckensnitt till din textbok.

För Android Phone

Eftersom teckensnittet är en systemnivåapplikation kommer du inte att kunna ändra teckensnittet enkelt i din Android-telefon. För dem som har en äldre Android-telefon (före Android 4.0 ICS) måste du rota din telefon och installera appen Font Changer-programmet Custom Android Font Switcher.

Öppna din File Manager-app, navigera till roten till SD-kortet (/ sdcard) och skapa en mapp (om den inte finns) ".fontchanger". Placera alla Roboto-teckensnitt i den här mappen. Öppna Font Changer-appen och bevilja det SuperUser-tillståndet. När den är laddad ska du se Roboto-teckensnittet för val i huvudmenyn.

För IOS

Det går inte att ändra iOS-systemfonten utan att jailbreaking enheten. Var beredd att upphäva din garanti.

1. Jailbreak din iOS-enhet och installera BytaFont från Cydia.

2. Gå sedan till "Cydia -> Section -> Fonts" och installera Roboto-teckensnittet

3. Slutligen kör BytaFont-appen och du ska se Roboto-teckensnittet i listan, redo att användas.

För webben

Om du vill använda Roboto-teckensnittet på din webbplats kan du använda CSS3 @ font-face-syntaxen för att bädda in externt teckensnitt till din webbsida.

1. Gå till FontSquirrel Roboto typsnitt sidan och klicka på "@ font-face Kit" länken. Ladda ner "@ font-face kit".

(enligt Apache Software License).

2. Ta ut den zippade filen till din webbplatsens teckensnittsmapp. Öppna ditt webbstilarkiv och lägg till följande kod:

 @ font-face {font-family: 'Roboto'; src: url ('Roboto-Regular-webfont.eot'); src: url ('Roboto-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Regular-webfont.woff') format Regular-webfont.ttf ') format (' truetype '), url (' Roboto-Regular-webfont.svg # RobotoRegular ') format (' svg '); typsnitt: normal; typsnittstyp: normal; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Italic-webfont.eot'); src: url ('Roboto-Italic-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Italic-webfont.woff') format Italic-webfont.ttf ') format (' truetype '), url (' Roboto-Italic-webfont.svg # RobotoItalic ') format (' svg '); typsnitt: normal; typsnittstyp: kursiv; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Bold-webfont.eot'); src: url ('Roboto-Bold-webfont.eot? #iefix') format ('inbäddad opentype'), url ('Roboto-Bold-webfont.woff') format Bold-webfont.ttf ') format (' truetype '), url (' Roboto-Bold-webfont.svg # RobotoBold ') format (' svg '); font-weight: bold; typsnittstyp: normal; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-BoldItalic-webfont.eot'); src: url ('Roboto-BoldItalic-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-BoldItalic-webfont.woff') format ("woff"), url BoldItalic-webfont.ttf ') format ("truetype"), url (' Roboto-BoldItalic-webfont.svg # RobotoBoldItalic ') format (' svg '); font-weight: bold; typsnittstyp: kursiv; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Thin-webfont.eot'); src: url ('Roboto-Thin-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Thin-webfont.woff') format ('woff'), url ('Roboto- Thin-webfont.ttf ') format (' truetype '), url (' Roboto-Thin-webfont.svg # RobotoThin ') format (' svg '); font-vikt: 200; typsnittstyp: normal; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-ThinItalic-webfont.eot'); src: url ('Roboto-ThinItalic-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-ThinItalic-webfont.woff') format ThinItalic-webfont.ttf ') format ("truetype"), url (' Roboto-ThinItalic-webfont.svg # RobotoThinItalic ') format (' svg '); (enligt Apache Software License). font-vikt: 200; typsnittstyp: kursiv; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Light-webfont.eot'); src: url ('Roboto-Light-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Light-webfont.woff') format Light-webfont.ttf ') format ("truetype"), url (' Roboto-Light-webfont.svg # RobotoLight ') format (' svg '); font-vikt: 100; typsnittstyp: normal; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-LightItalic-webfont.eot'); src: url ('Roboto-LightItalic-webfont.eot? #iefix') format ('inbäddad opentype'), url ('Roboto-LightItalic-webfont.woff') format LightItalic-webfont.ttf ') format (' truetype '), url (' Roboto-LightItalic-webfont.svg # RobotoLightItalic ') format (' svg '); font-vikt: 100; typsnittstyp: kursiv; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-Medium-webfont.eot'); src: url ('Roboto-Medium-webfont.eot? #iefix') format ('embedded-opentype'), url ('Roboto-Medium-webfont.woff') format ('woff'), url ('Roboto- Medium-webfont.ttf ') format ("truetype"), url (' Roboto-Medium-webfont.svg # RobotoMedium ') format (' svg '); typsnitt: 300; typsnittstyp: normal; } @ font-face {font-family: 'Roboto'; src: url ('Roboto-MediumItalic-webfont.eot'); src: url ('Roboto-MediumItalic-webfont.eot? #iefix') format ('inbäddad opentype'), url ('Roboto-MediumItalic-webfont.woff') format ("woff"), url MediumItalic-webfont.ttf ') format (' truetype '), url (' Roboto-MediumItalic-webfont.svg # RobotoMediumItalic ') format (' svg '); typsnitt: 300; typsnittstyp: kursiv; }

Se till att du ändrar "src" för att peka på sökvägen för typsnittskorgen.

Därefter kan du använda syntaxen

 font-family: "Roboto";

för att visa Roboto-teckensnittet på din webbsida.

Det är allt. Njut av!