How To Add Foreign Fonts to Your CSS
CSS offers a good number of font families which can be used. Sometimes though, those fonts just don’t cut it and you need to go out and get a font for whatever your creative needs may be. I will take you through how to do just that.
First, you will need to find a website which offers downloadable fonts. Some websites require payments for their fonts but here are a couple websites I’ve used which offer their fonts for free:
I’m going to use 1001 free fonts as an example in my walkthrough.
After downloading your font of choice, you should see a zipped folder.
Once you open the folder, there will be a couple of files. The file/files you’re interested in are the ones with Type of “TrueType font file” or “OpenType font file”. There may be more than one of such files. Those files are just slight variations of the same font type. Select one of them and copy into downloads or documents.
At this point, you want to open up Visual Studio Code and download the “iconfont-preview” extension. Also, in Visual Studio Code, within the folder containing whatever you’re working on, create a new folder called “Fonts”. Next open up file explorer and Visual Studio code side by side on your screen and in file explorer, navigate to documents or downloads. Next, click on the font file, then drag and drop the “TrueType font file” into the font file in Visual Studio Code.
Next, go into your CSS file and type in “@font-face” then type in curly braces. Inside those curly braces, type in “src: url(“file path”)”. then in the next line, type in “font-family:” then a name of your choosing which you’ll refer to whenever you want to use that font. Both lines should end with semi-colons.
Now when you want to use that font, just insert it as the first font of a font family;
