Typography has always been an important part of good design, branding, and readability and web fonts offer many additional benefits: the text is selectable, searchable, zoomable, and high-DPI friendly. - Optimizing Web Font Rendering Performance
All these years, websites are restricted to typical fonts such as Arial, Georgia, Times and so on. This is due to the limitations of browsers, which at one time, were only able to deliver fonts from the user’s machine. Fortunately today, the web evolves fast and today’s browsers are supporting webfont embedding. - Free Web Font Services – Compared
Webfonts are a font format with a specific license that permits web designers and developers to use real typography online without losing the advantages of live text — dynamic, searchable, accessible content. - What are webfonts?
There are four primary levers that determine the performance impact of web fonts on the page: - Optimizing Web Font Rendering Performance
- The total number of fonts and font-weights used on the page.
- The total byte size of fonts used on the page.
- The transfer latency of the font resource.
- The time when the font downloads are initiated.
1. Copy the entire pe-icon-7-stroke directory into your project.
2. In the <head> of your html, reference the location to our icon font CSS: pe-icon-7-stroke.css and if needed helper CSS: helper.css.
<link rel="stylesheet" href="path/to/pe-icon-7-stroke/css/pe-icon-7-stroke.css">
<!-- Optional - Adds useful class to manipulate icon font display -->
<link rel="stylesheet" href="path/to/pe-icon-7-stroke/css/helper.css">
3. Place the icons in your HTML
place your icon inline using a html tag such as <span> or <i>
<span class="pe-7s-map-marker"></span> pe-7s-map-marker
<i class="pe-7s-home"></i> pe-7s-home
- Scalable vector;
- Versatility with CSS;
- Screen Readers compatible;
- Create your own;
Enjoy this freebie and want to show support? Spread the word.
Download, share and enjoy!