Bezplatné fonty, ikony a obrázky

Tento článek (nebo jeho část) je převzat z externího zdroje. Je tedy slušností jej uvést včetně případného autora.
https://stylifycss.com/en/snippets/assets/fonts/

Fonts

Golden Ratio Typography

Get correct line height for your font => https://grtcalculator.com

Fonts

Fonts optimization

When loading custom font, you should check out the following optimization tricks:

  • Try to avoid importing various font sizes: 300,400,700 should be enough for most cases
  • You may want to download the font and host it from your own server. It’s faster then using external CDN.
  • Use woff or woff2. Avoid SVG fonts
  • The fastest way to load the font is to convert it into the Base64 into the CSS file. This way, the browsers doesn’t have to wait for the font to load and there are no layout shifts caused by the font change.
  • When lazyloading the font, use the property. This doesn’t block the page rendering.font-diplay:swap

Icons

Icons sets

Icons optimization

When adding icons to your page, you might consider some optimization steps:

  • If you need icons like arrow left or arrow right, you might want to take one icon and use the CSS to rotate the icon in the direction you need. This way, you can have one icon for various directions
  • When you need to load various icons, check out some applications like IcoMoon. This app can merge various icons into one font. It can improve page performance because there are fewer requests. Also, the font is more flexible than embedding a link to each icon
  • Icons should be in the SVG format. Try to avoid JPG or PNG. It is because SVG size can be changed easily without getting blurred.
  • If the icon is a direct path but can be lazyloaded, you should add the loading="lazy" and the decoding="async" attribute. This allows the browser to continue rendering the page and decode images asynchronously.

Images

Images optimization

When loading various images on page, try following optimization tricks:

  • If the image should be loaded immediately, use fetchpriority="high" attribute. Otherwise use loading="lazy". This will decrease the amount of images loaded when the customer enters the page.
  • Use correct size. If the block size is for example 400×200, do not load image 2000×1000
  • For images, that are large on desktop, try to split the image into smaller pieces and load it using <picture> element.

Související články:

Plovoucí popisky ve formulářích (float labels)
Barevný kontrast na webu a nástroje, které s ním pomohou
Jednotky pro tvorbu webu (em, rem, %, px, vh, vw): Kde použít jakou?