Embedding webfonts in css not working

HTML/CSS
2

Hi I actually did such operation on a project recently.
I also had to convert True Type fonts to WOFF2 from a Linux machine.

Pro Tip
For reference there is a Linux package to install. woff2 It has tool to convert TTF to WOFF/WOFF2.

As of your problem, it is difficult to say because you have a popup covering all the code.

I will give you an example that worked for me.

Say you have such folder structure.

  • index.html
  • static
    • css
      • styles.css
      • fonts.css
    • fonts
      • myfont.woff2
      • myfont-italic.woff2
      • myfont-bold.woff2

fonts.css

 @font-face {
     font-family: "My Font";
     src: url(../fonts/myfont.woff2);
 }

 @font-face {
     font-family: "My Font";
     src: url(../fonts/myfont-italic.woff2);
     font-style: italic;
 }

 @font-face {
     font-family: "My Font";
     src: url(../fonts/myfont-bold.woff2);
     font-weight: bold;
 }

styles.css

@import url(fonts.css);

index.html

<link rel="stylesheet" href="static/css/styles.css" />

Hope this helps.