Step 1):- Open VS CODE (or any other code editor of your choice )and write simple boiler coder by entering shift and exclamation mark
.
Step 2):- write some content as i have written "Lorem ipsum text" under "h1" tag .
Step 3):- In this step you are required to include google fonts(since google fonts contains more than 800 different types of font styles to choose from and their servers are 24*7 available ) to your html file , which can be done by visiting the official website of google fonts
Type google fonts in your web browser and then click on the First link of Google Fonts
After clicking on Google fonts this homepage will appear where you have to select font style which you want to apply on your website for eg. i like cursive fonts so i have choosen "Lobster" .
And it looks like this.
scroll slightly the page and click select Regular 400
now click on the last icon of navbar (resembling to logo of windows)
Now open selected families and open Lobster(i am opening lobster here you must open your selected font style)
copy the link on the right bottom of website
websiteand apply it to HTML FILE below Title tag
Now make a separate file because till now we have only included google fonts but not implemented it (mark the difference between include and implement) we will do implementation Using css file so I am forming a styles.css file and including its link in html file as <link rel="stylesheet" href="./styles.css" type="text/css"> below <title> tag.
Now in css FIle
I have to apply font style on p tag so copy the font family from google fonts website given below the (link of including google fonts in html file) and it looks like this
This is my css file (please note there is an error here that i have written p tag instead of h1 tag ) h1 tag should be present here.
and here is my output
More about Google Fonts:-
Google Fonts is a free and open-source library of web fonts that offers over 1,000 high-quality font families for use on websites. These fonts are designed to look great on digital screens and are optimized for web performance, ensuring that they load quickly and provide a good user experience.
The library includes a wide variety of fonts, ranging from classic serif fonts to modern sans-serif fonts, as well as specialty fonts like handwriting and display fonts. Each font family includes multiple styles and weights, allowing web designers and developers to customize the typography on their websites to fit their specific design needs.
One of the biggest benefits of using Google Fonts is the ease of implementation. The fonts are hosted on Google's servers, meaning that website owners and developers do not need to host the font files on their own servers or worry about the technical details of font loading. Instead, they can simply add a few lines of code to their website's HTML and CSS to access and use the fonts.
Google Fonts also offers advanced customization options, including the ability to adjust font weight, style, and size to fit the specific needs of a website's design. This allows web designers and developers to create a unique look and feel for their websites that sets them apart from the competition.
In addition to the aesthetic benefits, using Google Fonts can also have a positive impact on website performance. Because the fonts are hosted on Google's servers, they are optimized for fast loading and can help to reduce page load times. This can improve the user experience for visitors to the website and can also have a positive impact on search engine rankings, as site speed is a factor that search engines consider when ranking websites in search results.
Another benefit of using Google Fonts is that they are available under an open-source license, which means that they can be used without any licensing fees or restrictions. This makes them a cost-effective option for web designers and developers who may not have the budget to purchase expensive font licenses.
Finally, Google Fonts offers a user-friendly interface that makes it easy to browse through the library and select the right font for a specific project. The interface allows users to filter fonts by category, language, and popularity, making it easy to find the perfect font for any website.
In conclusion, Google Fonts is a powerful tool for web designers and developers that offers a wide variety of high-quality fonts that are optimized for web performance. With advanced customization options, easy implementation, and cost-effective licensing, Google Fonts is a great choice for anyone looking to improve the typography on their website.
I hope you like this article . Share hearts if you like this content and hardwork.