It is possible that the fonts you see on your Windows system are available because they are already installed on your computer. However, in order to ensure consistency across all devices and users, it is important to load custom fonts on your website.
The fonts you mentioned seem to be licensed, meaning you may need to pay for them in order to use them legally. For the purpose of this example, I will use Roboto.
Once you have loaded a font, remember to apply it in your CSS:
body {
font-family: 'Roboto', sans-serif;
}
Utilizing External Fonts
External fonts are sourced from external websites and imported into your own site. One popular source for free external fonts is Google Fonts.
There are two methods for importing external fonts.
You can either include the import code within your HTML's head section:
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
Or, you can import them using import within your CSS:
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
Utilizing Internal Fonts
Internal fonts are those hosted on your own server. To utilize internal fonts, you must host the font files on your website and use the font-face rule to load them, as shown below:
@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 */
}