{"id":228,"date":"2015-07-01T13:28:03","date_gmt":"2015-07-01T13:28:03","guid":{"rendered":"https:\/\/futuramo.com\/blog-test\/?p=228"},"modified":"2018-03-22T16:37:05","modified_gmt":"2018-03-22T15:37:05","slug":"futuramo-icons-webfonts","status":"publish","type":"post","link":"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/","title":{"rendered":"Using Futuramo Icons as fonts (.ttf, woff2, .eot)"},"content":{"rendered":"<p class=\"post-component text\">Download and use your favorite icons as fonts: TrueType (.ttf), Web Open Font Format 2.0 (.woff2) and Embedded Open Type (.eot). With Futuramo Icons it&#8217;s very easy! Just select icons you need, apply one of the 16 styles and download your webfont pack.<\/p>\n<figure class=\"post-component picture\"><\/figure>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1066 size-medium\" src=\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2017\/09\/webfonts-1-800x800.png\" alt=\"futuramo icons webfonts\" width=\"800\" height=\"800\" srcset=\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2017\/09\/webfonts-1.png 800w, https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2017\/09\/webfonts-1-150x150.png 150w, https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2017\/09\/webfonts-1-768x768.png 768w, https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2017\/09\/webfonts-1-320x320.png 320w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p class=\"post-component text\">The Futuramo webfont pack is a bundle of font files in the following formats:<\/p>\n<ol>\n<li><strong>TrueType (.ttf)<\/strong> \u2013 used e.g. by Safari, Android Browser<\/li>\n<li><strong>Web Open Font Format 2.0 (.woff2)<\/strong> \u2013 used by most modern browsers<\/li>\n<li><strong>Embedded Open Type (.eot)<\/strong> \u2013 used by IE6-9<\/li>\n<\/ol>\n<p class=\"post-component text\">Inside the package you will also find a CSS file (with the @font-face and icon declarations for use in web development) and a html demonstration file. Downloading webfont packs is easy, just follow the steps:<\/p>\n<div class=\"post-component text\">\n<ol>\n<li>Go to <a href=\"https:\/\/futuramo.com\/apps\/icons\" target=\"_blank\" rel=\"noopener\">Icons page<\/a> and select the icons that you want included in the webfont.<\/li>\n<li>Select the style of the webfont. Size and color are irrelevant this time, because a font shape can be scaled and coloured by the user, depending on its intended use.<\/li>\n<li>Select the \u201cDownload\u201d button from the top toolbar to open the download dialog.<\/li>\n<li>Select the\u201cWebfont\u201d option and enter the name that identifies your new webfont.<\/li>\n<li>Click \u201cDownload\u201d. A webfont pack will be generated and you will be prompted to save it on your computer.<\/li>\n<\/ol>\n<figure class=\"post-component picture\"><\/figure>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-1068 size-full\" src=\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2017\/09\/webfonts-gif.gif\" alt=\"futuramo icons webfonts-gif\" width=\"1086\" height=\"800\" \/><\/p>\n<p>You can also use the fonts we provide in your locally installed programs. The .ttf file should be compatible for installing with most operating systems. After installation, your graphics program of choice will allow you to select the icons you just download from the Glyph Table, if such functionality is supported.<br \/>\n<img loading=\"lazy\" class=\"alignnone wp-image-1067\" src=\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2017\/09\/webfonts-2-809x800.png\" alt=\"futuramo icons in adobe illustrator (AI)\" width=\"800\" height=\"791\" srcset=\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2017\/09\/webfonts-2-809x800.png 809w, https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2017\/09\/webfonts-2-768x760.png 768w, https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2017\/09\/webfonts-2.png 1001w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3 id=\"why-use-webfont-icons-for-icons\" class=\"post-component text\"><strong>Why use webfont icons for icons?<\/strong><\/h3>\n<ul>\n<li>Compatible with all major browsers, even up to IE6<\/li>\n<li>Limited requests to the server by bundling all the icons in a single resource<\/li>\n<li>Your icons behave just like any other text element, which allows easy and robust CSS styling, including colouring, scaling, opacity, adding shadows, etc.<\/li>\n<\/ul>\n<p><em>Article updated on 8\/9\/2017<\/em><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Download and use your favorite icons as fonts: TrueType (.ttf), Web Open Font Format 2.0 (.woff2) and Embedded Open Type (.eot). With Futuramo Icons it&#8217;s very easy! \n","protected":false},"author":2,"featured_media":234,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","csco_post_video_location":[],"csco_post_video_url":"","csco_post_video_bg_start_time":0,"csco_post_video_bg_end_time":0},"categories":[1],"tags":[60,7],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using Futuramo Icons as fonts (.ttf, woff2, .eot) | Futuramo Blog<\/title>\n<meta name=\"description\" content=\"Download and use our icons as fonts: TrueType (.ttf), Web Open Font Format 2.0 (.woff2) and Embedded Open Type (.eot). With Futuramo Icons it&#039;s easy!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Futuramo Icons as fonts (.ttf, woff2, .eot) | Futuramo Blog\" \/>\n<meta property=\"og:description\" content=\"Download and use our icons as fonts: TrueType (.ttf), Web Open Font Format 2.0 (.woff2) and Embedded Open Type (.eot). With Futuramo Icons it&#039;s easy!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Helping teams work better \u2014 insights on productivity, collaboration, marketing, and the tools that make it happen | Futuramo Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-01T13:28:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-22T15:37:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2015\/07\/futuramo-icons-webfonts-otf-woff-ttf.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:title\" content=\"Using Futuramo Icons as fonts (.ttf, woff2, .eot) | Futuramo Blog\" \/>\n<meta name=\"twitter:description\" content=\"Download and use our icons as fonts: TrueType (.ttf), Web Open Font Format 2.0 (.woff2) and Embedded Open Type (.eot). With Futuramo Icons it&#039;s easy!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2015\/07\/futuramo-icons-webfonts-otf-woff-ttf.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Futuramo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/futuramo.com\/blog\/#website\",\"url\":\"https:\/\/futuramo.com\/blog\/\",\"name\":\"Helping teams work better \u2014 insights on productivity, collaboration, marketing, and the tools that make it happen | Futuramo Blog\",\"description\":\"Exploring Innovation, Effectiveness, and Creativity Across Industries \",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/futuramo.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/#webpage\",\"url\":\"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/\",\"name\":\"Using Futuramo Icons as fonts (.ttf, woff2, .eot) | Futuramo Blog\",\"isPartOf\":{\"@id\":\"https:\/\/futuramo.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/#primaryimage\"},\"datePublished\":\"2015-07-01T13:28:03+00:00\",\"dateModified\":\"2018-03-22T15:37:05+00:00\",\"author\":{\"@id\":\"https:\/\/futuramo.com\/blog\/#\/schema\/person\/98b5eca5abfaece04786f8a04ec93902\"},\"description\":\"Download and use our icons as fonts: TrueType (.ttf), Web Open Font Format 2.0 (.woff2) and Embedded Open Type (.eot). With Futuramo Icons it's easy!\",\"breadcrumb\":{\"@id\":\"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/futuramo.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Futuramo Icons as fonts (.ttf, woff2, .eot)\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/futuramo.com\/blog\/#\/schema\/person\/98b5eca5abfaece04786f8a04ec93902\",\"name\":\"Futuramo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/futuramo.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2021\/11\/Futuramo_avatar-96x96.png\",\"contentUrl\":\"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2021\/11\/Futuramo_avatar-96x96.png\",\"caption\":\"Futuramo\"},\"url\":\"https:\/\/futuramo.com\/blog\/author\/adminek\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Futuramo Icons as fonts (.ttf, woff2, .eot) | Futuramo Blog","description":"Download and use our icons as fonts: TrueType (.ttf), Web Open Font Format 2.0 (.woff2) and Embedded Open Type (.eot). With Futuramo Icons it's easy!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Using Futuramo Icons as fonts (.ttf, woff2, .eot) | Futuramo Blog","og_description":"Download and use our icons as fonts: TrueType (.ttf), Web Open Font Format 2.0 (.woff2) and Embedded Open Type (.eot). With Futuramo Icons it's easy!","og_url":"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/","og_site_name":"Helping teams work better \u2014 insights on productivity, collaboration, marketing, and the tools that make it happen | Futuramo Blog","article_published_time":"2015-07-01T13:28:03+00:00","article_modified_time":"2018-03-22T15:37:05+00:00","og_image":[{"url":"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2015\/07\/futuramo-icons-webfonts-otf-woff-ttf.jpg"}],"twitter_card":"summary","twitter_title":"Using Futuramo Icons as fonts (.ttf, woff2, .eot) | Futuramo Blog","twitter_description":"Download and use our icons as fonts: TrueType (.ttf), Web Open Font Format 2.0 (.woff2) and Embedded Open Type (.eot). With Futuramo Icons it's easy!","twitter_image":"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2015\/07\/futuramo-icons-webfonts-otf-woff-ttf.jpg","twitter_misc":{"Written by":"Futuramo","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/futuramo.com\/blog\/#website","url":"https:\/\/futuramo.com\/blog\/","name":"Helping teams work better \u2014 insights on productivity, collaboration, marketing, and the tools that make it happen | Futuramo Blog","description":"Exploring Innovation, Effectiveness, and Creativity Across Industries ","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/futuramo.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/#primaryimage","url":"","contentUrl":""},{"@type":"WebPage","@id":"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/#webpage","url":"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/","name":"Using Futuramo Icons as fonts (.ttf, woff2, .eot) | Futuramo Blog","isPartOf":{"@id":"https:\/\/futuramo.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/#primaryimage"},"datePublished":"2015-07-01T13:28:03+00:00","dateModified":"2018-03-22T15:37:05+00:00","author":{"@id":"https:\/\/futuramo.com\/blog\/#\/schema\/person\/98b5eca5abfaece04786f8a04ec93902"},"description":"Download and use our icons as fonts: TrueType (.ttf), Web Open Font Format 2.0 (.woff2) and Embedded Open Type (.eot). With Futuramo Icons it's easy!","breadcrumb":{"@id":"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/futuramo.com\/blog\/futuramo-icons-webfonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/futuramo.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using Futuramo Icons as fonts (.ttf, woff2, .eot)"}]},{"@type":"Person","@id":"https:\/\/futuramo.com\/blog\/#\/schema\/person\/98b5eca5abfaece04786f8a04ec93902","name":"Futuramo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/futuramo.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2021\/11\/Futuramo_avatar-96x96.png","contentUrl":"https:\/\/futuramo.com\/blog\/wp-content\/uploads\/2021\/11\/Futuramo_avatar-96x96.png","caption":"Futuramo"},"url":"https:\/\/futuramo.com\/blog\/author\/adminek\/"}]}},"_links":{"self":[{"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/posts\/228"}],"collection":[{"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":17,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/posts\/228\/revisions"}],"predecessor-version":[{"id":1501,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/posts\/228\/revisions\/1501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/media\/234"}],"wp:attachment":[{"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/media?parent=228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/categories?post=228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/futuramo.com\/blog\/wp-json\/wp\/v2\/tags?post=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}