I just need someone explain to me more about it and how I can create my own custom font and linked to CSS and why in CSS we use this CSS rule font-family:'shift',sans-serif;
Not all computers have the same fonts installed. If you want all of your users to see the same font then you can include it like we did when we put the link to shift.css in the head of our index.html file.
We are using that rule because we want our web page text to use the Shift font, and if that is not available, to fall back to the local computer's sans-serif font.
That question, I can't help you with, maybe someone who knows more about that will read this.
There are plenty of fonts out there that you can use, just like we used the Shift font in this exercise. Here is one place to find them https://developers.google.com/fonts/docs/getting_started
Does that cover what you were asking about?