![]() These are called Data URIs.ĭata URIs are great for small PNGs, like icons, and also work really well for small SVGs. Looking at Roboto, the typeface I used above, these are my file size reductions:įor really small graphics it makes more sense to embed them directly into your CSS or HTML instead of forcing the browser to open another request and download the file. ![]() Then copy the CSS from the CSS file into the top of your CSS-you may have to update the font paths at the top of the CSS you copied-and-pasted. I usually go with “Expert…” and only choose “WOFF” for the font formats because, according to Can I Use, it has good enough browser support-custom fonts are a luxury, not a must have.Īfter you’ve downloaded the font package, put the font files in your website, maybe a folder named fonts- or ideally on a CDN. The “Optimal” setting is likely what you need. Go to FontSquirrel’s Web Font Generator and upload the styles and weights of the fonts you’re planning on using. Google Fonts provides a limited sub-setting of their typefaces, but you can download the fonts and run them through another system to truly reduce the file size. Removing characters from the font file is called sub-setting. For example, if your website is only in English you can remove a bunch of characters from the font file. But, depending on the site you’re making you may only need a few of those characters. Most typefaces come with many characters so they can support lots of different languages. See the advanced SVG tutorial on how to embed SVGs in HTML. If an SVG image is used only once on your website, on a single page, consider embedding it directly into the HTML. And ideally you should be able to run them through ImageAlpha to compress the images even further. ico file make sure to run you favicon PNGs through ImageOptim.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |