How to Use Google fonts in CSS - CSS Tutorial for Beginners
How to use Google fonts in your own project's CSS - Introduction to Advanced CSS Tutorial for beginners || By Learning Simplified
In this tutorial, we briefly explained how to use Google fonts in your CSS. All you need to do is to open your browser, go to Google fonts website, and follow the necessary steps as follows :
1) Choose the font you will be working on. If you have selected any font you may search for it in the extreme right corner of your web page.
2) Check out the display by toggling between sentence, paragraph, alphabet, numerals and see whether it is suitable to your project or not. Vary the size if found necessary.
3) Click the '+' button to add the font to your selection. You may select multi-fonts here.
4) You may copy the link and paste the code in the <head> tag of the page you wish to use the font just beneath the link to your customized 'stylesheet.css' and every other links those are needed to be loaded first. In this case, I placed the code inside my 'index.html'.
5) Copy the font-family link in the Google fonts site and paste it into the tag, header or paragraph inside your 'stylesheet.css'.
6) You may import the css file from Google fonts and place it inside either your page.html or 'stylesheet.css'. In that case, there are two alternatives..
a) If you are using the @import syntax inside page.html, then first you have to open a <style> tag in <head> tag, then you have to place the @import syntax inside this style tag.
b) Or you may place this @import syntax directly into your 'stylesheet.css' by placing it above all selectors and class names. No need to introduce any <style> in this case as you are placing this syntax inside a .css document.
You need to stay online for usage of Google fonts, else it won't be working.You may download the selected font, but in that case you will have to generate the font in the older process as shown in the previous tutorial as the font downloaded offline will be in a particular .ttf or .otf format.
All the details of the procedure is analyzed and shown in the video tutorial below.
If you found this video useful, don't forget to share, comment, like and even SUBSCRIBE to stay tuned for more.
Thanks for watching this video in advance.
romaincrisis
baratheonpilled
kaledo-art
gummygunk
pixelskylines
ellievsbear
izzy806
annaxmalina
andulkaphoto
snowghoul
2087