- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use Google Fonts on your web page?
The Google Font is a free font service for computer and web. It launched in the year 2010 and owned by Google. In 2021, open-source icon support was added. It includes 1,576 font families that includes 352 variable font families. The official website of Google Font is fonts.google.com. Just like the Font Awesome icons, the Google Fonts are added to a website using the <link> element. Let us see how to add and use Google Font on a web page.
Features
Easily insert Google Fonts on your web page
It is having more than 1k font families
While selecting the font, check the specimen.
The Type tester is also provided
Directly download any font family
Set the link for the fonts
To add the fonts on our web page, we have used the Google Fonts. Include it on a web page using the <link> element −
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/>
Include the Google Font on your web page
To insert the Google Font on your page, use the font-family property and set it under the <body> element −
<style> body { font-family: "Permanent Marker", cursive; font-size: 22px; } </style>
Example
To use Google Fonts on your webpage, the code is as follows −
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/> <style> body { font-family: "Permanent Marker", cursive; font-size: 22px; } </style> </head> <body> <h1>Google fonts example</h1> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiores. </p> <h2>1 2 3 4 5 6 7 8 9 10</h2> </body> </html>