Advertisement
  1. Web Design
  2. Web Typography
Webdesign

Web Fonts in 60 Seconds

by
Difficulty:BeginnerLength:ShortLanguages:

Fonts for use on a website require files that are loaded from one of two places; the visitor’s own system, or a web server. Let’s take a quick look at web fonts in sixty seconds!

Thumbnail image taken from Auther web font by Seniors Studio
Thumbnail image: “Auther”, web font by Seniors Studio

Understanding Web Fonts

 

Fonts for use on a website require files that are loaded from one of two places. The first place is the visitor’s personal device (computer, smartphone etc.). These fonts are called “system fonts” and there aren’t many you can reliably use because only a couple of them are installed across all devices and operating systems.

The second place font files can be loaded from is the web (ie. “Web fonts). You can use any font you want in this manner, because you needn’t worry that a visitor doesn’t have access to the required files.

Web fonts can be served up either via your own site’s hosting, or from an external provider like Google Fonts. To serve up your own web fonts, firstly ensure you have permission to use the files, then put them on your host and use @font-face in your CSS to load them up. 

To use third party web fonts you’ll either add a link element to your head section, or some JavaScript code. And just in case, always specify some system fonts in your “font stack” to use as a fallback.

And that’s web fonts, in sixty seconds!

Web Fonts From Envato Elements

A subscription to Envato Elements will give you access to over 700 web fonts; a number that is growing with each passing month! If you’re a type fan, you need to take a look:

web fonts on Envato Elements
Web Fonts on Envato Elements
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.