But then I converted the example to outlines (meaning is out and s are used instead to draw the letter shapes), and the file ballooned from an incredibly tiny 4K to an incredibly large 260K (bigger than the entire fonts, albeit unzipped). Not too bad if the rest of the site was using those fonts too. In the example I’ve used here, I used Proxima Nova and FF Market from Typekit, and the Kit was about 115K. You’ll have to balance the options yourself. If the fonts in use aren’t used elsewhere, it might be a tall order to include an entire custom font just for use in a single graphic. If you’re using the same custom fonts elsewhere on the site, it’s a no-brainer, go ahead and use based designs as needed. Maybe someday they can get those things in sync. For instance, you might get like Exampleįrom Illustrator, but on the web it’ll need to be like Exampleīut hey that’s just part of the job. It’s a little funky because the font-family names will be a little off. Then they are available right in Illustrator. When you’re picking out fonts, you can add them to a Kit to use on the web, as well as sync locally via the Creative Cloud thingy. I think Typekit makes this workflow pretty nice, with their desktop syncing feature. This workflow works best if you can fart around in local software with the fonts that you also have available via For instance, if you were working in Open Sans, you could download a copy of that for desktop use from Font Squirrel but then use it on the web via Google Fonts. This works with inline SVG, where you can set font-family with CSS: Some Cool Text Yeah.hook Scales proportionately. Using and custom fonts on your site? No problem. Not outlines of text, just regular ol’ selectable, accessible web text. The big “trick” here is that SVG has a element that is just that: text. Too much risk from different font rendering behavior.īut with inline SVG, we can do it, and do it well. Too much touchy, unscalable absolute positioning. This is something we might tell a graphic designer switching from print to web to avoid. Some text is kerned out below to match the width of that same word. Perhaps a certain word is positioned between the ascenders of another word below it. Let’s say you designed something with custom fonts that was a little bit fancy.
0 kommentar(er)
