These fonts probably work on your Windows because you have them installed on your computer. To support custom fonts for everyone (and your other devices), you must load them in your website.
The fonts you provided are licensed fonts, and as far as I know these require you to pay money to use them legally. So for my example I'll use Roboto.
Remember that after loading a font, you still have to apply them in your css:
body {
font-family: 'Roboto', sans-serif;
}
External Fonts
External fonts are fonts hosted on external websites, imported in your own. A great place to find free external fonts is Google Fonts.
There are two ways to import external fonts.
You can either import it inside your HTML's head like so:
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
Or inside your CSS using import like so:
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
Internal fonts
Internal fonts are hosted by yourself. You would have to host the font files on the website, and use the font-face rule to load them like so:
@font-face {
font-family: 'Roboto';
src: url('roboto.eot'); /* IE9 Compat Modes */
src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('roboto.woff') format('woff'), /* Modern Browsers */
url('roboto.ttf') format('truetype'), /* Safari, Android, iOS */
url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}
