Built with NextJS, Tailwind CSS and Framer Motion

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  Creating a @font-face animation using CSS involves changing the font during an animation sequence. This can be done by defining multiple @font-face rules for different font styles or weights and then animating the font properties using @keyframes. Below is an example of how to achieve this.

  Define Your Fonts Using @font-face:

  • You need to define the fonts that you want to use in your animation. For example:

  @font-face {
      font-family: 'MyFont';
      src: url('path/to/font-regular.woff2') format('woff2'),
           url('path/to/font-regular.woff') format('woff');
      font-weight: normal;
  }
  
  @font-face {
      font-family: 'MyFont';
      src: url('path/to/font-bold.woff2') format('woff2'),
           url('path/to/font-bold.woff') format('woff');
      font-weight: bold;
  }
  

  Create Keyframes for Animation:

  • Define keyframes to change the font-weight (or any other font-related property) over time.

  @keyframes fontAnimation {
      0% {
          font-weight: normal;
      }
      50% {
          font-weight: bold;
      }
      100% {
          font-weight: normal;
      }
  }
  

  Apply the Animation to an Element:

  • Now, apply the animation to the desired element. You can set the duration, timing function, and other animation properties.

  .animated-text {
      font-family: 'MyFont', sans-serif;
      animation: fontAnimation 3s infinite;
  }
  

  Hope you will find this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  0

  ---

  

  P

  solvman•1,650

  @solvmanPosted 3 months ago

  @MikDra1

  Thank you for your feedback! What do you think about smoothly transitioning the font family? Setting transition effects doesn't seem to work when changing font families.

  Since I'm using Tailwind CSS all of the above could be done much simpler in case of font-weight: hover:font-bold

  0