here is my font face where i have my fonts and their directory respectively

@font-face {
        font-family: 'Pacifico';
        font-style: normal;
        src: url('../fonts/Pacifico.ttf');
      }

  @font-face {
    font-family: 'Lobster';
    font-style: normal;
    src: url('../fonts/Aladin-Regular.ttf');
  }

  @font-face {
    font-family: 'Neo';
    font-style: normal;
    src: url('../fonts/Nunito-SemiBoldItalic.ttf');
  }

  @font-face {
    font-family: 'Lob';
    font-style: normal;
    src: url('../fonts/Lobster.otf');

  }
.nav{
    float: right;
    padding: 0;
    margin: 0 0 0 5rem;
    font-family: 'Lobster';
}

.chat{
    font-family: 'Lob' !important;
  padding-right: 30rem;
}
.linkk{
    font-size: 20px;
    font-family: 'Lobster';
    position: absolute;
    padding-left: 6rem;
}

here is my home page where i have elements to style, the chat div, the linkk div, nav div and my form are not responding to font family i gave to them while some responded to the font i gave them, here is my code for the element below.

header>
            <Navbar bg="blue" expand= "sm">
                <Container fluid>
                    <div className="space"></div>
                    <div className="imagelogo">
                        <img src={logo} alt="logo" />
                    </div>
                    <div className="chat">
                        <Navbar.Brand>MyChat</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    </div>
                    <div className="nav">
                        <Navbar.Collapse id="basic-navbar-nav">
                            <Nav className="me-auto">
                                <div className="search">
                                    <InputGroup className="mb-3">
                                        <InputGroup.Text id="basic-addon1">