{"id":405,"date":"2010-10-14T18:11:26","date_gmt":"2010-10-14T17:11:26","guid":{"rendered":"http:\/\/www.simonedesign.it\/blog\/?p=405"},"modified":"2011-05-07T12:11:35","modified_gmt":"2011-05-07T11:11:35","slug":"font-squirrel-presenta-font-face-kit-generator","status":"publish","type":"post","link":"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/","title":{"rendered":"Font Squirrel presenta @font-face kit generator"},"content":{"rendered":"
\n<\/div>

\"Font<\/a><\/p>\n

Font Squirrel<\/strong> \u00e8 un contenitore di font scaricabili gratuitamente e utilizzabili anche per scopi commerciali. La punta di diamante di Font Squirrel \u00e8 @font-face kit generator<\/strong>. Mediante questo strumento abbiamo la possibilit\u00e0 di implementare il font personalizzato, direttamente sul nostro sito web, con l\u2019utilizzo di codice CSS3.<\/p>\n


\nSe, come me, hai provato ad implementare un font personalizzato (non presente nella lista font di default), senza l’ausilio di strumenti di questo tipo sarai certamente incappato in difficolt\u00e0 di compatibilit\u00e0 fra i diversi browser. Non \u00e8 il solito bug di ie6, infatti interessa anche FireFox, Chrome, ecc.., il motivo \u00e8 semplice: ogni browser riconosce un tipo diverso di estenzione font, di seguito un breve riepilogo delle estenzioni dei font e le relativi browser compatibili:<\/p>\n

.eot<\/strong> Internet Explorer 6+
\n.woff<\/strong> Firefox 3.6+
\n.tff (truetype)<\/strong> Safari 3+, Chrome, Opera10+<\/p>\n

Ci\u00f2 vuol dire che per visualizzare correttamente il font su tutti i browser dobbiamo implementare il font in almeno 3 estenzioni diverse, peccato che non \u00e8 facile come sembra trovarle, e quindi saremo costretti a convertire il font che abbiamo nelle altre estenzioni, Font Squirrel f\u00e0 anche questo!<\/p>\n

Vediamo in pratica il suo funzionamento, e segui questi 3 semplici passaggi:<\/p>\n

1) Scarica il font che desideri implementare nel tuo sito<\/h4>\n

Scegliamo in nostro font preferito, possiamo farlo anche dal sito Font Squirrel<\/strong><\/a> gratuitamente o da altri contenitori di font gratuiti come daFont<\/strong><\/a>.\n<\/p>\n

\n

2) Invia il font a Font Face Kit Generator<\/h4>\n

Vai al sito http:\/\/www.fontsquirrel.com\/fontface\/generator<\/strong><\/a>
\nA questo punto aggiungi il font che hai scelto:
\n\"Font<\/p>\n

Scegli la modalit\u00e0 che vuoi usare per generare lo script, puoi utilizzare la modalit\u00e0 \u201cExpert\u201d per esplorarne le possibilit\u00e0.
\nFlagga “Agreement: Yes, the fonts I’m uploading are legally eligible for web embedding.<\/em>” al che apparit\u00e0 il bottone “Download Your Kit”.<\/p>\n

\"Font\n<\/p>\n

\n

3) Implementa il risultato nel tuo sito<\/h4>\n

Il pacchetto in formato .zip che andrai a scaricare contiene: 4 formati del tuo font, lo stile css e una pagina demo.html. A questo punto sar\u00e0 semplice implementare il risultato all’interno del sito.\n<\/p>\n

Se hai domande al riguardo puoi scrivere un commento<\/p>\n","protected":false},"excerpt":{"rendered":"

Font Squirrel \u00e8 un contenitore di font scaricabili gratuitamente e utilizzabili anche per scopi commerciali. La punta di diamante di Font Squirrel \u00e8 @font-face kit generator. Mediante questo strumento abbiamo la possibilit\u00e0 di implementare il font personalizzato, direttamente sul nostro sito web, con l\u2019utilizzo di codice CSS3.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-405","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"\nFont Squirrel presenta @font-face kit generator | Blog | SimoneDesign<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Font Squirrel presenta @font-face kit generator | Blog | SimoneDesign\" \/>\n<meta property=\"og:description\" content=\"Font Squirrel \u00e8 un contenitore di font scaricabili gratuitamente e utilizzabili anche per scopi commerciali. La punta di diamante di Font Squirrel \u00e8 @font-face kit generator. Mediante questo strumento abbiamo la possibilit\u00e0 di implementare il font personalizzato, direttamente sul nostro sito web, con l\u2019utilizzo di codice CSS3.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | SimoneDesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SimoneDesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-10-14T17:11:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-05-07T11:11:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/10\/Font-Squirrel-presenta-font-face-kit-generator.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"203\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Simone Forti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:site\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simone Forti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/\",\"name\":\"Font Squirrel presenta @font-face kit generator | Blog | SimoneDesign\",\"isPartOf\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/10\/Font-Squirrel-presenta-font-face-kit-generator.jpg\",\"datePublished\":\"2010-10-14T17:11:26+00:00\",\"dateModified\":\"2011-05-07T11:11:35+00:00\",\"author\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/#primaryimage\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/10\/Font-Squirrel-presenta-font-face-kit-generator.jpg\",\"contentUrl\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/10\/Font-Squirrel-presenta-font-face-kit-generator.jpg\",\"width\":\"500\",\"height\":\"203\",\"caption\":\"Font Squirrel presenta font-face kit generator\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.simonedesign.it\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Font Squirrel presenta @font-face kit generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/\",\"name\":\"Blog | SimoneDesign\",\"description\":\"Web Marketing e non solo..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\",\"name\":\"Simone Forti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"caption\":\"Simone Forti\"},\"sameAs\":[\"http:\/\/www.simonedesign.it\/\"],\"url\":\"https:\/\/www.simonedesign.it\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Font Squirrel presenta @font-face kit generator | Blog | SimoneDesign","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/","og_locale":"it_IT","og_type":"article","og_title":"Font Squirrel presenta @font-face kit generator | Blog | SimoneDesign","og_description":"Font Squirrel \u00e8 un contenitore di font scaricabili gratuitamente e utilizzabili anche per scopi commerciali. La punta di diamante di Font Squirrel \u00e8 @font-face kit generator. Mediante questo strumento abbiamo la possibilit\u00e0 di implementare il font personalizzato, direttamente sul nostro sito web, con l\u2019utilizzo di codice CSS3.","og_url":"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/","og_site_name":"Blog | SimoneDesign","article_publisher":"https:\/\/www.facebook.com\/SimoneDesign\/","article_published_time":"2010-10-14T17:11:26+00:00","article_modified_time":"2011-05-07T11:11:35+00:00","og_image":[{"width":500,"height":203,"url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/10\/Font-Squirrel-presenta-font-face-kit-generator.jpg","type":"image\/jpeg"}],"author":"Simone Forti","twitter_card":"summary_large_image","twitter_creator":"@SimoneDesign_","twitter_site":"@SimoneDesign_","twitter_misc":{"Scritto da":"Simone Forti","Tempo di lettura stimato":"2 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/","url":"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/","name":"Font Squirrel presenta @font-face kit generator | Blog | SimoneDesign","isPartOf":{"@id":"https:\/\/www.simonedesign.it\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/#primaryimage"},"image":{"@id":"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/#primaryimage"},"thumbnailUrl":"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/10\/Font-Squirrel-presenta-font-face-kit-generator.jpg","datePublished":"2010-10-14T17:11:26+00:00","dateModified":"2011-05-07T11:11:35+00:00","author":{"@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d"},"breadcrumb":{"@id":"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/#primaryimage","url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/10\/Font-Squirrel-presenta-font-face-kit-generator.jpg","contentUrl":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/10\/Font-Squirrel-presenta-font-face-kit-generator.jpg","width":"500","height":"203","caption":"Font Squirrel presenta font-face kit generator"},{"@type":"BreadcrumbList","@id":"https:\/\/www.simonedesign.it\/blog\/font-squirrel-presenta-font-face-kit-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.simonedesign.it\/blog\/"},{"@type":"ListItem","position":2,"name":"Font Squirrel presenta @font-face kit generator"}]},{"@type":"WebSite","@id":"https:\/\/www.simonedesign.it\/blog\/#website","url":"https:\/\/www.simonedesign.it\/blog\/","name":"Blog | SimoneDesign","description":"Web Marketing e non solo..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d","name":"Simone Forti","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","caption":"Simone Forti"},"sameAs":["http:\/\/www.simonedesign.it\/"],"url":"https:\/\/www.simonedesign.it\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/comments?post=405"}],"version-history":[{"count":37,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/405\/revisions"}],"predecessor-version":[{"id":1485,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/405\/revisions\/1485"}],"wp:attachment":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/media?parent=405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/categories?post=405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/tags?post=405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}