How to add "Ubuntu Font Family" to my site using CSS? [duplicate]

Question

How do I add the Ubuntu Font Family in CSS editor for my site? Here's what I have for my font and header already, but don't want the current font I have, I want Ubuntu Font.

/* ##### Common Styles ##### */

body {
  color: black;
  background-color: white;
  font-family: "times new roman", times, roman, serif;
  font-size: 12pt;
  margin: 0;
  padding: 0;
}

acronym, .titleTip {
  font-style: italic;
  border-bottom: none;
}

or

/* ##### Header ##### */

#header {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid black;
}

.headerTitle {
  font-size: 200%;
  margin: 0;
  padding: 0 0 0.5ex 0;
}

.headerTitle a {
  color: black;
  background-color: transparent;
  font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  text-decoration: none;
}

.subHeader {
  display: none;
}


/* ##### Side Bars ##### */

#side-bar {
  display: none;
}


/* ##### Main Copy ##### */

#main-copy {
  text-align: justify;
  margin: 0;
  padding: 0;
}

#main-copy h1 {
  font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
  font-size: 120%;
  margin: 2ex 0 1ex 0;
  padding: 0;

Where do I add Ubuntu Font Family? And did I insert the wrong code to help you, help me?

Answer 1

Importing the font

First, you have to make sure, your site has that font in case the average user who visits your site doesn't have it.

Option 1 - Import from external provider

You can import the whole font file and settings from an external font host like Google Fonts. Just add this code to your HTML to import it:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">

Option 2 - Store it in your server

You can download then upload the font files to your server, then import them via @font-face in your CSS. In this example the place of your font file will be http://example.com/fonts/ubuntu.woff.

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(http://example.com/fonts/ubuntu.woff) format('woff');
}

Using the font

You have to specify where do you want to use that font. Just add Ubuntu to your font-family list:

body {
    font-family: Ubuntu, "times new roman", times, roman, serif;
}

This example code will make the Ubuntu font the default font for every text in your entire web page unless it is overriden by a more specific CSS rule.