# 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

Google Fonts (opens new window) is an online collection of more than 1000 font families
Let's integrate Inter (a popular 2020 font) into our website

Search for Inter on the Google Fonts site or go directly to https://fonts.google.com/specimen/Inter (opens new window)
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');

We can now use the 'Inter' font:

font-family: 'Inter', sans-serif;

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');

You can use the 1700+ free icons (opens new window) by putting them in an i tag (or a span tag) in your HTML file:

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

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

Font Awesome provides us with some predefined classes to style the icons in a very easy way
Some possibilities:
Each styling use case (and even more than the ones listed above) is very well described in the official Font Awesome documentation

    
<div>
    <i class="fas fa-camera fa-xs"></i>
    <i class="fas fa-camera fa-lg"></i>
    <i class="fas fa-camera fa-5x"></i>
</div>
<div class="fa-3x">
    <i class="fa-solid fa-snowboarding"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-90"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-180"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-270"></i>
    <i class="fa-solid fa-snowboarding fa-flip-horizontal"></i>
    <i class="fa-solid fa-snowboarding fa-flip-vertical"></i>
    <i class="fa-solid fa-snowboarding fa-flip-both"></i>
  </div>
<div class="fa-3x">
    <i class="fas fa-spinner fa-spin"></i>
    <i class="fa-solid fa-skull-crossbones fa-fade"></i>
    <i class="fas fa-sync fa-spin"></i>
	<i class="fa-solid fa-sync fa-spin" style="--fa-animation-duration: 5s;"></i>
    <i class="fas fa-cog fa-flip"></i>
	<i class="fas fa-stroopwafel fa-beat"></i>
	<i class="fa-solid fa-square-exclamation fa-beat-fade"></i>
</div>
<div class="fa-stack fa-2x">
    <i class="fas fa-camera fa-stack-1x"></i>
    <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</div>

    
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css');
div {
    margin: 2rem 1rem;
}