Responsive Recipe page

Community feedback

• 

  Raza Abbas•790

  @RazaAbbas62Posted 10 months ago

  To use custom fonts:

  1. Include Font Files:

     • Place your font files in a folder (e.g., "fonts") within your project.

  2. Define Font Face in CSS:

     @font-face {
       font-family: 'YourFontName';
       src: url('path/fonts/your-font-file.woff2') format('woff2'),
            url('path/fonts/your-font-file.woff') format('woff');
     }
     

     Replace 'YourFontName' with the desired font family name, and update the file paths based on your project structure.

  3. Apply the Font in CSS:

     body {
       font-family: 'YourFontName', sans-serif;
     }
     

     Use the specified font family in the font-family property. If the custom font is unavailable, the browser will use a generic sans-serif font as a fallback.

  I hope it will help.

  Happy Coding :)

  Marked as helpful

  1

  ---

  

  Angwenyi Ogata•200

  @AngwenyiOgataPosted 10 months ago

  hello @FazeenIjaz Thanks for for your answer to the challenge i faced. I modified the CSS, you can take a look at the code to suggest any more changes

  @font-face {
    font-family: 'outfit';
    src: url(../assets/fonts/outfit/Outfit-VariableFont_wght.ttf);
  }
  @font-face {
    font-family: 'YoungSerif';
    src: url(../assets/fonts/young-serif/YoungSerif-Regular.ttf);
  }
  

  when i tried to add the format() in the src the fonts could not load and it was displaying the fallback serif or sanserif

  1