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.
Attached is a screenshot from my styles.css file with the missing font-family.
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
- 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.
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.
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.
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