{"id":50220,"date":"2018-08-02T11:18:01","date_gmt":"2018-08-02T18:18:01","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=50220"},"modified":"2024-04-17T06:28:59","modified_gmt":"2024-04-17T13:28:59","slug":"svg-fonts-fascinating-examples","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples","title":{"rendered":"SVG Fonts: 20 Fascinating Examples & How to Use Them"},"content":{"rendered":"

It’s certainly an exciting time for typography lovers everywhere: innovative font formats are making their way into design software, browsers, and operating systems. One such format is what we know as OpenType-SVG, a type of font in which some (or all) glyphs are represented as SVG (Scalable Vector Graphics).<\/p>

We recently discussed some of the history and technical features of OpenType fonts<\/a>, and it’s important to remember that all of those traits also apply to this particular format, with the added benefit of including SVG glyphs. How do they do that, exactly? We saw that OpenType fonts are made up of tables<\/em>, and one of them happens to be the (optional) “SVG table<\/a>“. Font designers can now decide whether they want their entire font to include TrueType outlines, CFF outlines, SVG artwork, or a combination of all three<\/em>. Exciting times, like I said!<\/p>

<\/span>OpenType-SVG and Color Fonts<\/strong><\/span><\/h2>

But why are these SVG glyphs so promising for font families? Because storing certain glyphs as Scalable Vector Graphics allows you to display them, for example, with many different colors, gradients, and even animations. <\/em><\/strong>
You read that right: fonts are about to get a lot more colorful. This unique feature made possible by the OpenType-SVG format has earned it a simpler, more popular label<\/a>: color fonts. <\/strong><\/p>

<\/span>Where and How Can I Use These Fonts?<\/span><\/h2>
\"\"<\/figure><\/div>

The OpenType-SVG format is available for use<\/a> in Photoshop CC Versions 18.0+, Illustrator CC Versions 22.0.0+, and InDesign CC Versions 13.0.1+. Just install your fonts as usual and type freely. Here’s what an OpenType-SVG font looks like when you use it in Photoshop:

Unlike regular fonts you may be used to, OpenType-SVG fonts incorporate color directly to the glyph. That means any special effects, gradients, or toning will remain consistent without having to add any layer styles.<\/p>

<\/span>Stunning Examples of OpenType-SVG, aka Color Fonts<\/span><\/h2>

If you’re looking for a distinctive SVG font for your design projects, here are 20 great families created by Creative Market designers, as well as some suggestions on how to use them.<\/p>

<\/span>Pink Sugar<\/span><\/h2>

Get ready to make your designs dazzle with this pack that boasts a full set of 3D, shiny pink PNG letters and a corresponding SVG Bitmap font. While both are Bitmap-based, the PNG letters offer more control over placement and sizing, adding a fun twist to your layouts. If you’re a Photoshop whiz, you can even tweak the color to suit your vision. The PNG letters work with any graphic design tool supporting PNGs, while the SVG font syncs with Photoshop CC 2017, Illustrator CC 2018, or Procreate 4.3 (or newer).<\/p>

<\/figure>\n

<\/span>Love & Hearts<\/span><\/h2>

Get ready to break free from design conventions with this unconventional SVG font family that shimmers like liquid gold. This pack features eight diverse fonts that promise endless design possibilities, whether you’re crafting logos, branding packages, social media posts, posters, or website elements. To truly unlock the golden potential of this SVG font, you’ll need Photoshop CC 2017, Illustrator CC 2018, or Procreate 4.3 (or newer). For those who prefer a more classic approach, the pack also includes a regular sans font with straight lines and its bold, outlined, and funky versions. Dive in and let your creativity flow with this versatile font pack!<\/p>

<\/figure>\n

<\/span>Hunters Opentype SVG Font<\/span><\/h2>

Greg Nicholls created Hunters OpenType SVG Font<\/a>, an SVG font designed to convey bold brush strokes. According to Greg, each letter was painted dozens of times “until deemed perfect, and then edited to get the texture absolutely perfect”.<\/p>

<\/figure>\n

<\/span>Opulent Font + SVG<\/span><\/h2>

Opulent Font + SVG<\/a> by Sam Parrett is a set of hand-lettered calligraphy fonts that come in brush, solid, and SVG variants. Use Opulent<\/em> to recreate that unique, diluted texture of watercolor lettering.<\/p>

<\/figure>\n

<\/span>Always Thankful – SVG Font Duo<\/span><\/h2>

Always Thankful<\/a> is a pack of two Opentype SVG fonts: a regular version and a caps version. You also get a collection of swashes and splatter brushes that complement the family’s visual aesthetic well.<\/p>

<\/figure>\n

Designer Greg Nicholls created two great video tutorials to explain how the font can be used in both Photoshop and Illustrator.
\n<\/p>

<\/span>Black Caviar SVG Font<\/span><\/h2>

Black Caviar<\/a> is a handwritten SVG font that exudes movement and magic. It was created by designer Ivan Rosenberg, who introduced a subtle slant that creates the illusion of speed.<\/p>

<\/figure>\n

<\/span>The Game – SVG Color font<\/span><\/h2>

Use The Game<\/a> by Polar Vectors if you want an SVG color font that is “vibrant, fun, and futuristic.” It’s a great asset to incorporate into a game or robotics project, and it can be used in brochures, book covers, poster design, and more.<\/p>

<\/figure>\n

<\/span>Neon: OTF Color Font<\/span><\/h2>

Ink Drop created Neon<\/a>. This is a bold SVG font that conveys positive energy and fun. There are no punctuation symbols or numbers in this font â€” just realistic, neon-like letters.<\/p>

<\/figure>\n

<\/span>Avallon OpenType-SVG Font<\/span><\/h2>

Sam Parrett created Avallon OpenType-SVG Font<\/a>, a hand-painted brush font with incredible detail. Use it for any project that needs a tactile but casual look. Avallon is ideal for bold headings.<\/p>

<\/figure>\n

<\/span>Bluesky OpenType-SVG Font<\/span><\/h2>

Blankids Studio designed Bluesky<\/a> in order to create a font script with shadow detail, which actually looks 3D. The font includes uppercase, lowercase, number, punctuation, alternates, and multilingual characters.<\/p>

<\/figure>\n

<\/span>Bouqet Flower & Watercolor<\/span><\/h2>

For any project that requires a botanical typeface, consider Bouqet Flower & Watercolor<\/a>. The font set created by bloomxxvi comes with two different flower styles: realistic and watercolor.<\/p>

<\/figure>\n

<\/span>Blockino: OpenType-SVG Color Font<\/span><\/h2>

Blockino by Haafe & Haph<\/a> is an OpenType-SVG color font. It comes with 8 pre-made color styles, but you can also use the creator’s online tool to customize your palette.<\/p>

<\/figure>\n

<\/span>Yeah Foil Balloon Color Font<\/span><\/h2>

There’s something unmistakable about mylar balloons. Get them in font form with the Yeah foil balloon colour font<\/a> created by It’s me<\/em> simon<\/em>. The font looks like 3d balloons, and it’s a great option for birthday cards, signage, and other projects inspired by life’s celebrations.<\/p>

<\/figure>\n

<\/span>Beforth – OpenType SVG Font<\/span><\/h2>

Beforth – OpenType SVG Font<\/a> was created by Greg Nicholls. This OpenType SVG font is hyper-realistic and looks handwritten. Each lowercase letter in this typeface has an alternate glyph option.<\/p>

<\/figure>\n

<\/span>Havana Sunset Font Duo + SVG<\/span><\/h2>

Mimic the fun of a Havana night by using the Havana Sunset Font Duo + SVG<\/a> by Sam Parrett in a project. In addition to the font, you’ll get a full alternate set of characters, SVG version, as well as a filled and an outlined version.<\/p>

<\/figure>\n

<\/span>Hamilton SVG Font Collection<\/span><\/h2>

There’s a musical that’s taken over the nation. It’s called Hamilton, and this font by Tom Chalky harkens back to the marketing materials of the project. The SVG font family contains a serif, sans serif, and a script variant.<\/p>

<\/figure>\n

<\/span>JUNE DAYS OpenType-SVG Color Font<\/span><\/h2>

JUNE DAYS OpenType-SVG Color Font<\/a> was created by Dixie Type Co. In addition to an OpenType-SVG font and cuttable letters that can be used in any fun, summery project, you also get individual PNG letters with transparent backgrounds.<\/p>

<\/figure>\n

<\/span>Portabella Font Collection<\/span><\/h2>

Callie Hegstrom created Portabella Font Collection,<\/a> a family with a unique watercolor style and built-in texture. In addition to the SVG font, there are also solid and serif fonts, as well as floral elements, watercolor backgrounds, and transparent PNG textures.<\/p>

<\/figure>\n

<\/span>Renaissance Garden Layered Font<\/span><\/h2>

If you want an old-fashioned SVG font that evokes nostalgia, check out Renaissance Garden by Burntilldead<\/a>. This font is influenced by 19th century French types and architecture. This font includes more than 600 glyphs.<\/p>

<\/figure>\n

<\/span>Ciera Watercolor SVG Font & Florals<\/span><\/h2>

Ciera Watercolor SVG Font & Florals<\/a> comes with 4 fonts, 23 floral illustrations, and 6 premade logos. In addition to an SVG font, it contains solid, sans regular, and sans bold fonts. The set also has 23 illustrations and 6 pre-designed logos ready to be customized in Illustrator.<\/p>

<\/figure>\n

<\/span>Wild Irish Rose Brush Script Font<\/span><\/h2>

Every letter in Wild Irish Rose brush script font<\/a> has been hand painted. Each uppercase letter has at least 2 alternatives, and every lowercase letter has many more. The font also includes punctuation and numbers.<\/p>

<\/figure>\n

<\/span>America OTF Color Font<\/span><\/h2>

Create all your patriotic projects with America OTF Color Font<\/a>. Letters and numbers are inspired by the US flag, with red\/blue stripes and white ornaments for festivity.<\/p>

<\/figure>\n

When you need a distinctive, colorful SVG font<\/a> for your project, browse Creative Market to find some that have been created by professional designers.<\/p>

Products Seen In This Post:<\/strong>

<\/p>

<\/figure>\n
<\/figure>\n \n","protected":false},"excerpt":{"rendered":"

It’s certainly an exciting time for typography lovers everywhere: innovative font formats are making their way into design software, browsers, and operating systems. One such format is what we know as OpenType-SVG, a type of font in which some (or all) glyphs are represented as SVG (Scalable Vector Graphics). We recently discussed some of the history […]<\/p>\n","protected":false},"author":44,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[37,288,1406,1527],"topics":[1738],"class_list":["post-50220","post","type-post","status-publish","format-standard","hentry","category-design-basics","tag-typography","tag-font-collection","tag-opentype","tag-svg-fonts","topics-learn-typography"],"acf":[],"yoast_head":"\nSVG Fonts: 20 Fascinating Examples & How to Use Them - Creative Market Blog<\/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:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG Fonts: 20 Fascinating Examples & How to Use Them\" \/>\n<meta property=\"og:description\" content=\"It's certainly an exciting time for typography lovers everywhere: innovative font formats are making their way into design software, browsers, and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-02T18:18:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-17T13:28:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2018\/08\/17031809\/OpenType-SVG-Fonts-Color.jpg.webp\" \/>\n<meta name=\"author\" content=\"Ciera Holzenthal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ciera Holzenthal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/svg-fonts-fascinating-examples\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/svg-fonts-fascinating-examples\",\"name\":\"SVG Fonts: 20 Fascinating Examples & How to Use Them - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/svg-fonts-fascinating-examples#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/svg-fonts-fascinating-examples#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2018\\\/08\\\/17031809\\\/OpenType-SVG-Fonts-Color.jpg.webp\",\"datePublished\":\"2018-08-02T18:18:01+00:00\",\"dateModified\":\"2024-04-17T13:28:59+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/e63db94722b4dd579837f010d93d43ad\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/svg-fonts-fascinating-examples#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/svg-fonts-fascinating-examples\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/svg-fonts-fascinating-examples#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2018\\\/08\\\/17031809\\\/OpenType-SVG-Fonts-Color.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2018\\\/08\\\/17031809\\\/OpenType-SVG-Fonts-Color.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/svg-fonts-fascinating-examples#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG Fonts: 20 Fascinating Examples & How to Use Them\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"SVG Fonts: 20 Fascinating Examples & How to Use Them - Creative Market Blog","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:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples","og_locale":"en_US","og_type":"article","og_title":"SVG Fonts: 20 Fascinating Examples & How to Use Them","og_description":"It's certainly an exciting time for typography lovers everywhere: innovative font formats are making their way into design software, browsers, and","og_url":"https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2018-08-02T18:18:01+00:00","article_modified_time":"2024-04-17T13:28:59+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2018\/08\/17031809\/OpenType-SVG-Fonts-Color.jpg.webp","type":"","width":"","height":""}],"author":"Ciera Holzenthal","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Ciera Holzenthal","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples","url":"https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples","name":"SVG Fonts: 20 Fascinating Examples & How to Use Them - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2018\/08\/17031809\/OpenType-SVG-Fonts-Color.jpg.webp","datePublished":"2018-08-02T18:18:01+00:00","dateModified":"2024-04-17T13:28:59+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/e63db94722b4dd579837f010d93d43ad"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2018\/08\/17031809\/OpenType-SVG-Fonts-Color.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2018\/08\/17031809\/OpenType-SVG-Fonts-Color.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/svg-fonts-fascinating-examples#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SVG Fonts: 20 Fascinating Examples & How to Use Them"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/50220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=50220"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/50220\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=50220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=50220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=50220"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=50220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}