{"id":5136,"date":"2011-01-27T09:24:16","date_gmt":"2011-01-27T09:24:16","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=5136"},"modified":"2011-01-27T09:24:16","modified_gmt":"2011-01-27T09:24:16","slug":"ways-to-display-custom-fonts-on-your-website","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/","title":{"rendered":"Ways to display custom fonts on your website"},"content":{"rendered":"<p> Standard web fonts. Love \u2018em or hate \u2018em, you\u2019ve got to admit that they\u2019re in desperate need of an update.<\/p>\n<p>You can specify several different fonts in your CSS, but you run the risk of not having full control over what your website looks like to your visitors. You could also make your titles into images using fonts on your computer, but this may impact your page loading times and the SEO of your site.<\/p>\n<p>Luckily there are several real workarounds for getting a wider variety of fonts on your website&#8230;and here are our top picks..<\/p>\n<h4>Google Font Directory<\/h4>\n<p>If you\u2019re anything like me, you don\u2019t want to pay to use a non-standard web font on your website. This is where the Google Font Directory comes in.<\/p>\n<p>The last time I visited the Google Font Directory there were literally only a handful of fonts to choose from, but they have added a lot more. What was originally a token gesture from Google has become a valuable resource for web designers, and its future looks bright.<\/p>\n<p><img decoding=\"async\" title=\"Google Font Directory\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/01\/custom-fonts.png\" alt=\"\" \/><\/p>\n<p>The biggest advantage is that the fonts are all free to use \u2013 and it\u2019s very simple to implement them as you just need a couple of lines of CSS. Although there aren\u2019t as many fonts to choose from as other services, there are already some great ones on there.<\/p>\n<p>Google\u2019s Font API is great for designers who don\u2019t like fiddling with code too much and want a fast, easy solution. Check out the Google Font API <a href=\"https:\/\/code.google.com\/apis\/webfonts\/\" target=\"_blank\">here<\/a>.<\/p>\n<p><img decoding=\"async\" title=\"Google Font Directory\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/01\/custom-fonts2.png\" alt=\"\" \/><\/p>\n<p>.<b>@font-face<\/b><\/p>\n<p>Using the @font-face CSS rule, you can display custom fonts on your webpage for all to see. Whilst it\u2019s not as streamlined as Google\u2019s out-of-the-box font solution, the bonus is that you have a lot more choice when it comes to typefaces.<\/p>\n<p>Check out <a href=\"https:\/\/www.font-face.com\" target=\"_blank\">Font-Face<\/a> and <a href=\"https:\/\/www.miltonbayer.com\/font-face\" target=\"_blank\">this tutorial<\/a> for implementation details.<\/p>\n<p>.<b>Font Squirrel Font-Face Kits<\/b><\/p>\n<p>Based on the @font-face rule, <a href=\"https:\/\/www.fontsquirrel.com\" target=\"_blank\">Font Squirrel<\/a> has put together a selection of free <a href=\"https:\/\/www.fontsquirrel.com\/fontface\" target=\"_blank\">font-face kits<\/a> so you don\u2019t have to waste time converting files or searching for all the different file types you need. Download, unzip, upload to your site and add the code.Another bonus is that there are hundreds to choose from.<\/p>\n<p><a href=\"https:\/\/fontsquirrel.com\/fontface\" target=\"_blank\"> <img decoding=\"async\" title=\"Font Squirrel\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/01\/custom-fonts3.png\" alt=\"\" \/><\/a><\/p>\n<p>.<b>Typekit<\/b><\/p>\n<p><a href=\"https:\/\/typekit.com\" target=\"_blank\">Typekit<\/a> is similar to the Google Font API in terms of implementation, but has a bigger selection of fonts to choose from. The downside is that you\u2019ll more than likely have to pay; there\u2019s a free plan available, but it\u2019s quite restricted in terms of page views. If you design a lot of websites (or just really love typography), the paid subscriptions are reasonably priced alternatives.<\/p>\n<p><a href=\"https:\/\/www.typekit.com\" target=\"_blank\"> <img decoding=\"async\" title=\"Typekit\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/01\/custom-fonts4.png\" alt=\"Typekit\" \/><\/a><\/p>\n<p>.<b>Typotheque<\/b><\/p>\n<p>Another premium website, <a href=\"https:\/\/www.typotheque.com\" target=\"_blank\">Typotheque<\/a> measures your usage via bandwidth rather than page views. It also offers a web trial licence so you can see if their service is right for you before making a commitment.<\/p>\n<p><a href=\"https:\/\/www.typotheque.com\" target=\"_blank\"> <img decoding=\"async\" title=\"Typotheque\" src=\"\/blog_assets\/wp-content\/uploads\/2011\/01\/custom-fonts5.png\" alt=\"\" \/><\/a><\/p>\n<p>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Standard web fonts. Love \u2018em or hate \u2018em, you\u2019ve got to admit that they\u2019re in desperate need of an update. You can specify several different fonts in your CSS, but&#8230;<\/p>\n","protected":false},"author":2,"featured_media":8204,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,29],"tags":[],"class_list":{"0":"post-5136","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"category-your-website"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ways to display custom fonts on your website - Heart Internet<\/title>\n<meta name=\"description\" content=\"Ways to display custom fonts on your website - Written by the team at Heart Internet.\" \/>\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.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ways to display custom fonts on your website - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"Ways to display custom fonts on your website - Written by the team at Heart Internet.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-01-27T09:24:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1620\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated 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\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"Ways to display custom fonts on your website\",\"datePublished\":\"2011-01-27T09:24:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/\"},\"wordCount\":490,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg\",\"articleSection\":[\"Web Design\",\"Your Website\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/\",\"name\":\"Ways to display custom fonts on your website - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg\",\"datePublished\":\"2011-01-27T09:24:16+00:00\",\"description\":\"Ways to display custom fonts on your website - Written by the team at Heart Internet.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg\",\"width\":1620,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ways to display custom fonts on your website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ways to display custom fonts on your website - Heart Internet","description":"Ways to display custom fonts on your website - Written by the team at Heart Internet.","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.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/","og_locale":"en_GB","og_type":"article","og_title":"Ways to display custom fonts on your website - Heart Internet","og_description":"Ways to display custom fonts on your website - Written by the team at Heart Internet.","og_url":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2011-01-27T09:24:16+00:00","og_image":[{"width":1620,"height":720,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"Ways to display custom fonts on your website","datePublished":"2011-01-27T09:24:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/"},"wordCount":490,"commentCount":2,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg","articleSection":["Web Design","Your Website"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/","url":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/","name":"Ways to display custom fonts on your website - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg","datePublished":"2011-01-27T09:24:16+00:00","description":"Ways to display custom fonts on your website - Written by the team at Heart Internet.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_web_design1.jpg","width":1620,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/ways-to-display-custom-fonts-on-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"Ways to display custom fonts on your website"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/5136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=5136"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/5136\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/8204"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=5136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=5136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=5136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}