Webdesign Advanced

# Web fonts & Icons

  • Fonts and icons are useful for improving the user interface and experience of your website
    • Choosing the right font stack is vital for attracting your target audience
    • Icons help visitors find their way on your website. They are easy to understand and grab a user's attention.
  • Google Fonts is a popular collection of online fonts
  • Font Awesome is a great and easy to use library for icons

# Fonts

# Google Fonts

  1. Search for Inter on the Google Fonts site or go directly to https://fonts.google.com/specimen/Inter (opens new window)
  2. Select the Inter font and select the Regular 400 style:

inter regular 3. Import the font in your CSS file using the @import statement:

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

  
        Copied!
1
  1. We can now use the 'Inter' font:
font-family: 'Inter', sans-serif;

  
        Copied!
1

REMARK: url()

The use of the url() function in the@import statement is not necessary: the 'Inter' font can also be imported by the statement @import 'https://fonts.googleapis.com/css2?family=Inter&display=swap'

REMARK: Multiple styles

  • Some Google fonts come in a lot of styles (Regular 400, Bold 700, Regular 400 italic, Bold 700 italic, ... )
  • Select the styles you want to use (e.g. Regular 400 and Bold 700) and they are added (e.g. wght@400;700) to the @import statement: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
  • Selecting only the Regular 400 style obviously decreases loading time, but if you then use e.g. the bold version of the font in your page layout, the browser will use a faux bold. That is, the browser tries to create a bold version of the font itself.

REMARK: FOUT vs FOIT

  • Using &display=swap enforces the text on our website to be displayed, even when the font is not yet downloaded (e.g. on slow connections)
    • The fallback font is used as "first" font and replaced (swapped) afterwards with the downloaded font
    • This behavior is called FOUT : Flash of Unstyled Text
  • The opposite FOIT (Flash of Invisible Text) technique hides the text until the font is downloaded
    • On slow connections, this behavior feels unnatural and your visitors might think the the website is broken

# Icons

# Font Awesome

  • Font Awesome (opens new window) is a very popular icon toolkit based on CSS
  • The only thing you need is an import of the Font Awesome CDN link at the beginning of your CSS stylesheet
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css');

  
        Copied!
1
<h1>Font Awesome is cool! <i class="fa-brands fa-angellist"></i></h1>

  
        Copied!
1

fa angelist

REMARK: Free vs Pro

  • When using Font Awesome 6 (opens new window), you can choose for the free or the pro (paid) version
    • In the free version you can only use some Solid, Regular and Brands styles
    • In the pro version you can also use Light, Thin and Duotone styles
    • The free plan is perfectly sufficient for us

fa free

# Styling icons

Last Updated: 2/12/2023, 1:44:27 PM