CODEWITHSUNDEEP
htmlcss
Jerielle
Jerielle

Reputation: 7520

How to include a font .ttf using CSS?

I want to include a global font for my page. I downloaded a .ttf file, and included it in my CSS, but my font won't change.

Here's my code:

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    font-family: oswald;
    vertical-align:baseline
}

Where did I go wrong?

Upvotes: 235

Views: 516272

Answers (5)

Andy McRae
Andy McRae

Reputation: 665

This was 10 years ago, sorry for the delay :), but I thought I'll put a more actual version of the answer to help other people who just came across this question. There is a good website called google webfonts helper that helps you import your own fonts on your webserver and also gives you the css code to do it easily. If you want to import let's say the regular (400) and 500 oswald fonts, simply search for "Oswald", select regular and 500, and you get the code like this:

/* oswald-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v53-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/oswald-v53-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 38+, Safari 12+, iOS 10+ */
}

you can also add the legacy .ttf suport and the code will update itself accordingly. Which is really cool. then on the bottom of the page, you will see a download button. This will be the complete zip package with your selected fonts. Mine is 400 and 500. then you need to define the folder path and it should work perfectly. The cool thing is that woff2 files are compatible with almost all the modern browsers (starting 2012 until now) so you don't need to make many more adjustments like IE support(url('webfont.eot?#iefix') format('embedded-opentype'),url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */, etc.). Take a look at this table to get a better idea: Compabitle Browsers with toff2

Upvotes: 0

Abhinav Gauniyal
Abhinav Gauniyal

Reputation: 7574

Only providing a .ttf file for web fonts won't be good enough for cross-browser support. The best possible combination at present is using a combination:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

This code assumes you have .eot , .woff , .ttf and svg format for you webfont. To automate all this process , you can use a web font generator like Font Squirrel or Transfonter.

Also, modern browsers are shifting toward the .woff font type, so you can probably do this, too:

@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

Read more here: https://css-tricks.com/snippets/css/using-font-face/

For browser support: Can I Use fontface

Upvotes: 344

BlakeWebb
BlakeWebb

Reputation: 533

You may need to fix your font location in the URL path:

@font-face{
  font-family: "Font Name";
  src: url("../fonts/font-name.ttf") format("truetype");
}

notice above that src:url("../fonts/font-name.ttf"); uses two periods to go back to the root directory and then into the fonts folder or wherever your file is located.

Upvotes: 19

user3883419
user3883419

Reputation: 771

Did you try format?

@font-face {
  font-family: 'The name of the Font Family Here';
  src: URL('font.ttf') format('truetype');
}

Read this article: http://css-tricks.com/snippets/css/using-font-face/

Also, might depend on browser as well.

Upvotes: 67

INTODAN
INTODAN

Reputation: 619

You can use font face like this:

@font-face {
  font-family:"Name-Of-Font";
  src: url("yourfont.ttf") format("truetype");
}

Upvotes: 28

Related Questions