title: How to change bootstrap.css font-family HTML to my own downloaded font
body: <p>I've tried to find how to do that, at least <a href="https://stackoverflow.com/questions/24075222/how-can-i-change-the-bootstrap-default-font-family-using-font-from-google">this link</a> almost got me. but she/he is using link to change the font.</p>
  
  <p>but I've my own downloaded font using <a href="https://font-converter.net/en" rel="nofollow noreferrer">font converter</a> (.eot .otf .svg .ttf .woff .woff2)</p>
  
  <p>and I have <code>style.css</code> like below:</p>
  
  <pre><code>/* font converted using font-converter.net. thank you! */
  @font-face {
    font-family: "CataneoBT-Regular";
  
    src: url("./fonts/07323Cataneo.svg") format("svg"), /* Legacy iOS */
      url("./fonts/07323Cataneo.ttf") format("truetype"), /* Safari, Android, iOS */
      url("./fonts/07323Cataneo.woff") format("woff"), /* Modern Browsers */
      url("./fonts/07323Cataneo.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
  }
  </code></pre>
  
  <p>This is piece of code of my bootstrap.css html:</p>
  
  <pre><code>html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
  }
  </code></pre>
  
  <p>The most similar code of my bootstrap is:</p>
  
  <pre><code>@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')
    format('embedded-opentype'),
    url('../fonts/glyphicons-halflings-regular.woff2')
    format('woff2'),
    url('../fonts/glyphicons-halflings-regular.woff')
    format('woff'),
    url('../fonts/glyphicons-halflings-regular.ttf')
    format('truetype'),
    url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular')
    format('svg');
  }
  .glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  </code></pre>
  
  <p>but as far as I know, this code just to displaying some icon</p>
  
  <p>I don't know how to change that code to displaying my own font</p>