201 css fonts

This PSD file will demo CSS Font support with various HTML based outputs from Photoshop. Export Kit will convert fonts in web-based environments into valid CSS fonts, these fonts have full support in all browsers without external files.

IMPORTANT: Test this PSD in each environment and various browsers to note the difference in font support.

File Size

1.1 MB

Download Now

CSS Fonts in Browsers

All fonts are not created equal, each browser will render fonts differently. Using Arial font (a very common font), your output will still look different when using IE, Chrome and FireFox.

Each browser and device uses its own character ranges and glyphs to render fonts. Each browser and device will also add its own default settings to each font, such as font-weight, which can be very different in each.

Learn more about Font Support.

Testing the PSD

Use Layers views to see the code translation of each layer, or use Exports view to see the output of the document. Additional support for Fonts in other environments, along with Google Fonts are also available.

Learn more about Adding Google Fonts to your exports.
Learn more about Adding External Fonts to Android.

Using Layers View

Select any shape element in the PSD, then select your desired view to see the code render of your shape.

Learn more about Using Layers View.

Using Exports View

Export the PSD in your required environment to see how shapes are rendered in your output.

Learn more about Using Exports View.
LOGIN NOW: Get instant access to our free Online Training - click here.

02. Using The Plugin

03. Layer Support

04. Basic Exports

05. Layer Tags

06. Optimization Tips

07. Complete Exports

🚀 Start saving time and money!