How to install a font in different operating systems or on your WEB site

Installing on Windows

This OS understands EOT or TTF formats as system fonts. The easiest way is to select the desired font file, right-click and select the “Install” or “Install for all users” sub-item. After that, everything will happen automatically. A few seconds of installation and your font is already in your system and is available for all programs that work with fonts!

The second method is a little more complicated, but you can’t do without it when you need to add a large number of fonts. However, many people will find it very convenient. Open the folder C:\Windows\Font and just copy your font files there. But do not forget that you can use only two formats EOT and TTF.

The third method is a bit like the previous one, but it may be preferable for many users. Open “Start” and start typing “font”. And the first point the OS will prompt you is the “Font settings” item or something similar as in the picture below.

Next, a window will open in which you can see all the fonts that are installed in your operating system. At the top, under the title of this window, there is an area where you can drag the font files and then they will be installed on your system. Thats all … you can use it.

Do not forget that the fonts that you installed in Windows for yourself can appear in your programs only after they are restarted. In general, we advise you to close Photoshop, Figma, Word and other editors that use fonts before installing new ones.

Installing on MacOS

MacOs like Windows use the same EOT or TTF font formats. Fonts are installed just as easily, but since this is Apple, there is a nuance. Only the Administrator has the rights to install the font on the computer. But nevertheless, being an administrator or knowing the password, the procedure itself is rather simple and convenient like other things in this wonderful OS.
Double click on the font file;
click on “Install”;
wait a couple of seconds and you’re done.
If the applications in which you planned to use the font were running during installation, they should be reloaded.

Installing on Linux

Everything is the same here. The formats are the same as in other OS – EOT or TTF. And in the installation itself, there is only one caveat – where to install. Either globally for everyone or for a specific user.

Globally, just copy the files to the /usr/share/fonts directory. If for a user, then to the .fonts folder from the home directory of a particular user.

In new versions of this OS, in particular Ubuntu, everything is as simple as it is on MacOS. Click on the font file (*. EOT or * .TTF) and select “Install” in the viewer. Ready.

Installation in various programs (Word, Adobe InDesign, Paint, Photoshop, Figma, Sketch and others)

If you want to use the font in any of your favorite programs, be it a text or graphics editor, you just need to install the font in your OS as described above. After that just restart the program and use it.

Installing a font on your website

Installing a font into your web project for a beginner may not be entirely trivial. But this is only at first glance. You just need to understand the pattern and correctly write the paths to the files in HTML and CSS. Let’s take a look at the Open Sans font as an example. After downloading the archive with the font inside, you will receive a complete set of the font files themselves and the stylesheet.css CSS file which already contains all the rules, which will greatly simplify the use of the font on your site.

First, unzip the archive and transfer our font to a convenient folder for use. Let it be the project_directory/fonts/open-sans/content_our_archive.

Next, in the HTML file itself, we will write the relative path to the style file of our font. Place preferably between <head>…</head>.

<link href="fonts/open-sans/stylesheet.css" rel="stylesheet" type="text/css" />

Or, alternatively, include the font through your main style file (let’s say it is in the “css” directory of your project). At the beginning of the file:

@import url("../fonts/open-sans/stylesheet.css"

Which way to use the way is up to you. Good luck with your projects.