How To Add Google Fonts & Font Awesome - Day 19

It’s mind blowing how many high quality free coding resources there are available.

It can be a bit intimidating looking for the right library to use within your own website simply because of the amount of options avilable but once you know what your looking for, it makes coding up a professional looking website quick & easy!

Font Awesome

Enter the Font Awesome CSS Icon library.

Font awesome is uhh a..pretty awesome.. Icon library that has a ton of free options and is easy to start using.

Step #1

Copy & Paste the Font Awesome CDN Link below into the HEAD of your HTML doucment.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Step #2

Browse the huge ass list of free (want to filter out the paid ones) of icons to use HERE.

Font Awesome Icons

Step #3

Use icon element in your code and ta-da, new icon on your website!

<i class="fas fa-ICON-NAME-HERE"></i>

Google Fonts

Step #1

Copy & Paste the Google Fonts Link below into the HEAD of your HTML doucment.

<link href="https://fonts.googleapis.com/css?family=FONTNAMEHERE" rel="stylesheet">

Step #2

Browse the huge ass list of free of fonts to use HERE.

Google Fonts

Step #3

Use font family style element to apply to the entire website or certain elements in your CSS file

style.css

html {
	font-family: 'FONTNAMEHERE', sans-serif;
}

Conclusion

Check out the video below for a more in-depth overview for the Zero to Startup in 30 Days Challenge.

How To Add Google Fonts & Font Awesome

Coming Tomorrow -----> Adding HTML Sections

Want To Learn How To Turn Your Ideas Into Code?


Written by Tim Moreton who lives and works
in Philadelphia building useful things.