<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
@font-face {
font-family: googleFont;
src: url("/Sofia-Regular.ttf");
}
h1 {
font-family: googleFont;
}
</style>
</head>
<body>
<h1>CSS @font-face Rule</h1>
<p><strong>Note</strong>: CSS has no font-family with a name googleFont.</p>
<p>Developer (you) can download any font-family from 3rd party and use it in your html page.</p>
<p>'font-family: googleFont;' - Here <strong>googleFont</strong> is a custom name given my myself and you change change it by your choice.</p>
<p>src: url("/Sofia-Regular.ttf"); - Here <strong>Sofia-Regular.ttf</strong> is a source file which is downloaded from <a href="https://fonts.google.com/">google fonts</a>.</p> </body>
</html>