@font-face

Property Variable Name

@font-face

Available Values for @font-face

font-family: "Font Name"; src: url(font_filename_location.woff);

Example using @font-face font-family: "Font Name"; src: url(font_filename_location.woff);

Here is an example using @font-face:font-family: "Font Name"; src: url(font_filename_location.woff);;

Code

<style>
@font-face {
  font-family: "Font Name"; src: url(font_filename_location.woff);
}
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
.demo-box-1 {
  font-family:"Josefin Sans", "Open Sans", sans-serif;
  padding:20px;
  overflow:auto;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  min-height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
}
.demo-box-1 .demo-box-sub-1 {
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:10px;
}
.demo-box-1 .demo-box-sub-2 {
  padding:10px;
  background:#3ba092;
  color:#FFF;
  margin:10px;
}
</style>
<h2>Example using @font-face font-family: "Font Name"; src: url(font_filename_location.woff);</h2>
<p>Here is an example using <code>@font-face:font-family: "Font Name"; src: url(font_filename_location.woff);;</code></p>
<div class='demo-box-1'>
  <div class='demo-box-sub-1'>
    <h5>Demo Box 1 Content 1</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>
  </div>
  <div class='demo-box-sub-2'>
    <h5>Demo Box 1 Content 2</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.</p>
  </div>
</div>