Where do default fonts come from?

user_10873272 0
Viewed 566

I have a front-end question about web development. I have a project in Django and in it I use JavaScript lib to draw charts on the web pages. The font on the chart is different from this on the web page, and I wanted to make them similar.

I found out that in different browsers I have the same fonts in the body: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial," Noto Sans", sans-serif," Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

My question is where they come from? Is that per browser setting / per system or something more general? I'm asking because I wanted to just set the same font family on the chart, and so I wonder is that possible that on some browser web page font family will be different?

web-deployment css html
2 Answers

'..where they come from?'

Generic font-families:

There are generic font families, so called web-safe fonts in order to give Web designers some control over the appearance of fonts on their Web pages, even when the specified fonts are not available, the CSS specification allows the use of several generic font families. They are available on all major operating systems (iOS & Windows - see below for Linux) and therefore considered to be safe to use:

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

Disclaimer: Following fonts aren't available on Linux based OS:

  • Sans-serif fonts: Charcoal, Helvetica, Geneva, Lucida Grande, Lucida Sans Unicode, MS Sans Serif, and Tahoma.
  • Serif fonts: Book Antiqua, New York, and Times.
  • Monospace font: Lucida Console.

More on Linux-fonts here..

Custom fonts

If you want custom fonts for your web-app/website, you need to import/embed them from a CDN or resource by using the CSS @font-face embedding technique:

<style type="text/css">
@font-face {
    font-family: "Custom Font";
    src: url(http://www.example.org/ustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Foo the bar!</p>

In this case Verdana and Tahoma are fall-back fonts in case there was an issue getting Custom Font..

Google Web Fonts offers the option to conveniently import fonts via their API.

<head>
   <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
   <style> 
      p { font-family: 'Droid Sans', arial, serif; }
   </style>
</head>

TrueType-Fonts (TTF), the Web Open Font Format (WOFF) or Embedded Opentype (EOT) should be supported by most modern browsers.

Here you can read more on the history and usage of Web-Typography

user_97935320

Fonts are defined in the font files (.ttf / .eot / .woff)

The font to be used on a webpage can be specified by using the @font-face css property.

Here is an example that specifies my-font defined in my-font.eot file to be used:

@font-face {
  font-family: 'my-font';
  src: url("/fonts/my-font.eot");
  font-weight: normal;
  font-style: normal; 
}

More information:

https://www.w3schools.com/css/css3_fonts.asp

user_65711650
Related