Embedding webfonts in css not working

HTML/CSS
1

I’ve followed the instructions on the embedding webfonts in the HTML/CSS course, module 2.

Copying the WOFF2 and WOFF files into the /fonts/opensans folder as per instructions and then when I go to add fonts in the property font-family: the opensans font-family isn’t on the list.

Screenshot from 2023-03-01 14-13-21
Screenshot from 2023-03-01 14-13-211366×768 142 KB

Attached is a screenshot from my styles.css file with the missing font-family.

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.

3

Thanks for the advice.
When I type in ‘opensans’ for font-family and save the CSS file.
It applies to the HTML file its linked to.

It just doesn’t come up automatically after typing in the font-family property with all the other font options.

So it works. but not like in the lesson.

Thanks again.

4

Ah ok so the problem is more related to the tool.
I must say that VS Code surprised me with having those things work across files I edited. On the other hand it did not work when I expected it to.

I do not know how VS Code does that.

Now there are functionalities in VS Code that work only if you are trusting the environment.

For instance the markdown plugin I use inserts a new hyphen automatically upon line break if the environment is trusted but has no reaction if it is not. This is something to try.

image
image1103×529 21.2 KB

I do not why I did not find the icon to trust my environment like I did in other machines. There was an icon on the bottom left corner of the window.

Now like almost everything use the magic Ctrl+⇑+P and type “Trust” then Workspaces: Manage Workspace Trust

Hopefully this helps.

Cheers