HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python Contents
CSS font family explained
By default, you can only choose from a handful of web-safe fonts to use in CSS. While they are practical and popular, they might not be of much use if you want to create a unique design. To be able to add a custom CSS font family and use it in your document, you need to use the @font-face rule:
@font-face {
font-family: fontname;
src: url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2);
}Using @font-face
By using the @font-face rule, you can include a custom CSS font family, load it in the browser and present it in the website:
@font-face {
   font-family: fontname;
   src: url(https://fonts.gstatic.com/s/lato/v16/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2);
font-weight: italic;
}This rule must appear before other styling properties in stylesheets.
To load a custom font family in CSS, you must define two properties:
- font-family defines the name of the font
srcdefines a URL from which the font will be downloaded
You can also include some optional properties:
| Property | Description |
|---|---|
| font-stretch | Defines how the font is stretched (normal by default) |
| font-style | Defines how the font is styled (normal by default) |
| font-weight | Defines the boldness of the font (normal by default) |
| unicode-range | Defines the unicode characters the font supports (U+0-10FFFF by default) |
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
How to use a downloaded font
To use a custom font family in CSS, you need to first find a trusted source that offers fonts (e.g., Font Squirrel) and download the file with the font you want. You might need to extract it when it finishes downloading.
The next steps differ slightly for Windows and Mac users:
| Windows | Right-click on the file to install it. Move the font files with the .ttf, .otf or .fon extension to the Fonts folder. |
| Mac | Double-click on the file and select Install Font in the menu that appears. |
Alternative methods for adding fonts
There are two methods that allow you to add a custom CSS font family without using @font-face – linking and importing.
Linking font files requires you to add a <link> element with the font source defined in the <head> part of the HTML document:
<link href="https://fonts.googleapis.com/css?family=Gayathri&display=swap" rel="stylesheet">
div {
font-family: 'Gayathri', sans-serif;
}Importing font files requires using the @import rule. Again, you will need to define the source to import the CSS font family from:
@import url('https://fonts.googleapis.com/css?family=Gayathri&display=swap');
div {
font-family: 'Gayathri', sans-serif;
}Browser support
Chrome
Edge
Firefox
IE
Opera
Safari
Mobile browser support
Chrome
Firefox
Opera
