Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Laura Hill
13,674 PointsDont laugh but...
I was wondering if web designers created chunks of text in illustrator, and saved them as svg's in order to preserve the look of the font and consistent rendering across browsers. Is that crazy?
3 Answers
Kevin Korte
28,149 PointsI would say this would not be a good way to go about. First off you're losing a couple of things. SEO would probably take a huge hit since crawlers can't read text from an image or SVG. The same problem with plague accessibility issues and screen readers.
Second is responsive text issues. More and more screen sizes keep getting introduced, from the very small to the very large. I don't believe text would be very responsive as a SVG as you couldn't adjust characters per line, etc like you can with regular text and CSS properties.
Third could be loading time. Text is very fast to load in, chunks of SVG's containing text might take more time, especially on mobile phones over data networks.
I think what you're giving up is a bigger hit over maintaining the exact font look a body of text. You can get consistent fonts by at least falling back to a web safe font. Not ideal, but more ideal than body text as SVGs.
One of my go-to places for fonts is http://www.fontsquirrel.com/ They'll give you all the CSS code and the font files you need to quickly and reliable install a webfont.
Hope that helps.
Mattox Shuler
Treehouse Guest TeacherHey Laura, great question. Justin hit the gist of it. Also, things can get funky with chunks of text as SVGs because the anti-aliasing (http://www.html5rocks.com/en/tutorials/internals/antialiasing-101/) might get weird at small sizes creating a harsh or uneven look to the text whereas a webfont makes up for that with proper anti-aliasing applied. Also for search-ability, it's best if all text on the site is in fact text. Hope that helps!
Laura Hill
13,674 PointsThanks guys! When I asked the question, I had'nt considered the SEO or licensing issues that might create.
Thoroughly enjoyed the Web Typography course. I'm always curious about what "workarounds" or shortcuts might exist, but looking forward to using web fonts. Thanks again!
Justin Black
24,793 PointsJustin Black
24,793 Pointshahaha! ( sorry, tell me not to do something i'm going to do it -- this is just me and in no way reflects your question )...
In the old days, we used to do exactly this. These days, its less common to need to do that, except for specific use cases such as a highly stylized logo or something along those lines.
But, for the most part -- web fonts have made this task a lot easier. We can include actual font files (ttf, woff, etc ) into our project, and call them with CSS or use the handy google fonts ( i prefer to keep them local to my project, but i often develop and design without being connected to the internet so google fonts is often not my best choice )