{"id":245822,"date":"2016-09-23T10:01:26","date_gmt":"2016-09-23T17:01:26","guid":{"rendered":"http:\/\/css-tricks.com\/?p=245822"},"modified":"2016-09-23T10:01:26","modified_gmt":"2016-09-23T17:01:26","slug":"system-fonts-svg","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/system-fonts-svg\/","title":{"rendered":"System Fonts in SVG"},"content":{"rendered":"

There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma;<\/code> and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe, sans-serif;<\/code>.<\/p>\n

These days, an astonishing number of sites are using custom fonts. 60%!<\/a><\/p>\n

No surprise, there is also a decent amount of pushback on custom fonts. They need to be downloaded, thus there are performance\/bandwidth hits. There is loads of nuance on how you load them<\/a>. <\/p>\n

Also no surprise, there is some advocacy for the return to local fonts. Fast! Good enough! Let’s look at that for a sec, then also look at using them within SVG.<\/p>\n

<\/p>\n

The trend isn’t just a return to local fonts but to what are being dubbed “system fonts”. The point isn’t so much a single font stack that looks consistent<\/em> across browser\/platform\/version, but a single font stack that matches<\/em> what that OS uses.<\/strong> <\/p>\n

If the OS uses “San Francisco” in the UI, the font-stack should display San Francisco. If the OS uses Roboto, so it shall be. The actual font stack to do this is fairly thick. But that’s the point, just list a bunch of fonts in the order you want to use them and CSS will fall down the stack until it finds one it has. <\/p>\n

Here’s what GitHub uses:<\/p>\n

body {\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\r\n}<\/code><\/pre>\n
The WordPress admin and Medium interface are currently using this:<\/p>\n
body {\r\n  font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;\r\n}<\/code><\/pre>\n
The title of this post is about using these font stacks in SVG. There is nothing special or different or particularly interesting about this. You can apply that font stack via CSS inside the SVG, or just put it right on a text element:<\/p>\n
<text font-family='-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"' font-size=\"18\" font-weight=\"400\" fill=\"black\" x=\"50\" y=\"50\">\r\n  Some Text\r\n<\/text><\/code><\/pre>\n
Setting text in SVG is kinda awesome<\/a>, as it retains its accessibility and is ultra-flexible.<\/p>\n
Again, the point of all this is to match the font used by the OS, so let’s take a look at that. OS X is particularly interesting as the system font has changed several times in the last few years. <\/p>\n
OS 10.0 – 10.9 – Lucida Grande
\nOS 10.10 – 10.11 – Helvetica Neue
\nOS 10.12 – San Francisco <\/p>\n
Chrome DevTools will not only show you the font stack when you inspect an element, but also the Rendered Fonts<\/b>.<\/p>\n
\"\"
OS 10.7 Showing us Lucida Grande<\/figcaption><\/figure>\n
\"\"
OS 10.10 showing us Helvetica Neue<\/figcaption><\/figure>\n
\"\"
OS 10.12 showing us San Franscisco<\/figcaption><\/figure>\n
And here’s a totally different operating system:<\/p>\n
\"\"
Ubuntu 15 showing us Liberation Sans<\/figcaption><\/figure>\n
Here’s a bunch of screenshots<\/h3>\n
Of this demo<\/a>.<\/p>\n
\"\"
Windows 7 – Firefox<\/figcaption><\/figure>\n
\"\"
Windows 7 – Chrome<\/figcaption><\/figure>\n
\"\"
Windows 7 – IE 9<\/figcaption><\/figure>\n
\"\"
Windows 10 – Chrome<\/figcaption><\/figure>\n
\"\"
Windows 10 – Firefox<\/figcaption><\/figure>\n
\"\"
Windows 10 – Edge<\/figcaption><\/figure>\n
\"\"
Ubuntu 15 – Firefox<\/figcaption><\/figure>\n
\"\"
Ubuntu 15 – Chrome<\/figcaption><\/figure>\n
The metrics of the different fonts are a bit different. The text fits a little tighter and looser depending on what renders. But it’s not too<\/em> far off. You might not set a typographic lockup<\/a> with system fonts, but all in all, very usable. <\/p>\n","protected":false},"excerpt":{"rendered":"
There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma; and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe, sans-serif;. These days, an astonishing […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[469,857,587],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":171038,"url":"https:\/\/css-tricks.com\/svg-text-typographic-designs\/","url_meta":{"origin":245822,"position":0},"title":"SVG `text` and Small, Scalable, Accessible Typographic Designs","date":"May 27, 2014","format":false,"excerpt":"Let's say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word. This is something we might tell a graphic\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":168417,"url":"https:\/\/css-tricks.com\/icon-fonts-vs-svg\/","url_meta":{"origin":245822,"position":1},"title":"Inline SVG vs Icon Fonts [CAGEMATCH]","date":"April 22, 2014","format":false,"excerpt":"If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":272772,"url":"https:\/\/css-tricks.com\/using-custom-fonts-with-svg-in-an-image-tag\/","url_meta":{"origin":245822,"position":2},"title":"Using Custom Fonts With SVG in an Image Tag","date":"June 21, 2018","format":false,"excerpt":"When we produce a PNG image, we use an tag or a CSS background, and that's about it. It is dead simple and guaranteed to work. PNG is way simpler to use in HTML than SVG Unfortunately, the same cannot be said for SVG, despite its many advantages. Although you're\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/nano-svg.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365677,"url":"https:\/\/css-tricks.com\/colrv1-and-css-font-palette-web-typography\/","url_meta":{"origin":245822,"position":3},"title":"COLRv1 and CSS font-palette: Web Typography Gets Colorful","date":"May 11, 2022","format":false,"excerpt":"According to Toshi Omagari, the author of Arcade Game Typography, the world\u2019s first multi-colored digital font was created in 1982 for a never-released video game called Insector. Multi-colored fonts, sometimes called chromatic type, are still relatively rare on the web, even though the COLR font format has had full cross-browser\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_07727771E2AE24CAE12B4C96FD6B6B6976797741459E0498D84303A46B2B3814_1644779893852_applehello.png?fit=1200%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":248009,"url":"https:\/\/css-tricks.com\/color-fonts\/","url_meta":{"origin":245822,"position":4},"title":"Color Fonts","date":"November 19, 2016","format":false,"excerpt":"Adobe explaining: OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":248261,"url":"https:\/\/css-tricks.com\/experimenting-color-fonts\/","url_meta":{"origin":245822,"position":5},"title":"Experimenting with Color Fonts","date":"November 29, 2016","format":false,"excerpt":"Over the past couple of weeks there\u2019s been a lot of excitement over color fonts. Adobe describes the technology like this: OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/245822"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=245822"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/245822\/revisions"}],"predecessor-version":[{"id":245846,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/245822\/revisions\/245846"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=245822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=245822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=245822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}