21

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?

Mike Wentworth
  • 311
  • 1
  • 2
  • 3

1 Answers1

31

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.

totymedli
  • 29,531
  • 22
  • 131
  • 165
  • Thanks! And how do I import fonts? – Mike Wentworth Dec 28 '13 at 19:53
  • Ah, I see now. It doesn't really change, but I should talk to the host developers. Thanks. – Mike Wentworth Dec 28 '13 at 20:03
  • @totymedli made a couple headings for you.. think that clarifies the question a little better. – brandonscript Dec 28 '13 at 20:08
  • link working perfectly but when i downloading and using in my site its not working will you please send me proper link where i can download and use it. Thanks – Muddasir Abbas May 25 '15 at 10:31
  • @MuddasirAbbas The googleapis link is a link for the CSS file, you can download the fonts themselves from the links in that file. – totymedli May 25 '15 at 18:07
  • link not working for me can you share link for me ? – Muddasir Abbas May 26 '15 at 05:48
  • @MuddasirAbbas The [link to the CSS](http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin) and [to the font file](http://fonts.gstatic.com/s/ubuntu/v7/BxfrwvhZBmVnDwajjdTQeH-_kf6ByYO6CLYdB4HQE-Y.woff2) works perfectly, you do something wrong. – totymedli May 26 '15 at 06:43
  • i want to download font and use in website. your link is working perfectly but i want to download and then want to use in site. i just want to know where can i download this font and how to use in site because i try allot but fail.. then i used your flow and it works but i still want to know why downloading font not working. hope you get my point. thanks – Muddasir Abbas May 26 '15 at 07:09
  • @MuddasirAbbas Just save the file I linked. Place it in your webserver and change the url in the font-face to your font url in your server. I can't help more, comments are not for this, if you have problems please ask a new question. – totymedli May 26 '15 at 12:09