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

5

I am not expert on this at all, but I am on this excat session as well, it’s my understanding fonts to not show in the list, that list is the “web safe fonts”

It’s my undertanding after you ghave registered the fonrt, you can do font-family then add the font you want manually

I could be wrong, this is what I got out of this section.