What is a web font?

<section class="demo-section">
<div class="demo-container">
  <div class="demo-main">Trust</div>
   <div class="demo-sub">Yourself</div>
  </div>
</section>

@font-face {
  font-family: 'baby-kruffy';
  src: url('baby-kruffy.woff2') format('woff2'),
  url('baby-kruffy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
} 

.demo-section {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 6rem 2rem 2rem 2rem; 
}
  
 .demo-container {
  font-family: baby-kruffy, sans-serif;
  }

.demo-main {
  position: relative;
  font-size: 90px;
  color: rgba(186, 255, 74, 0.60);
  text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.20), 8px 8px rgba(86, 114, 240, 0.20); 
  letter-spacing: 4px;
}
  
.demo-sub {
  position: relative;
  top: -65px;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.60);
  text-shadow: -4px 0 rgba(219, 73, 69, 0.20), 0 4px rgba(219, 73, 69, 0.40), 4px 0 rgba(219, 73, 69, 0.40), 0 -4px rgba(219, 73, 69, 0.40); 
  letter-spacing: 2px;
}