How do I use CSS to incorporate a.ttf font?

Problem

My code is giving me trouble. I downloaded a.ttf file because I want to utilize a global font on my page. I also included it in my main CSS, however my font remains same.

Here’s how I did it:

@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
} 

I’m not sure where I went wrong. Could you assist me with this? Thanks.

Asked by Jerielle

Solution #1

Only giving a.ttf file for webfont will not suffice for cross-browser compatibility. At the moment, the best potential combination is as follows:

@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 your webfont is in the.eot,.woff,.ttf, and svg formats. You can use Transfonter.org to automate this entire procedure.

Also, current browsers are migrating to the.woff font, so you should be able to do this as well::

@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 */
}  

More information can be found at http://css-tricks.com/snippets/css/using-font-face/.

Check for browser compatibility: Can I Use This Fontface?

Answered by Abhinav Gauniyal

Solution #2

Have you tried the format option?

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

Visit http://css-tricks.com/snippets/css/using-font-face/ for further information.

Also, it is possible that it is dependent on the browser.

Answered by user3883419

Solution #3

You can use the following font face:

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

Answered by INTODAN

Solution #4

I realize this is an old article, but it cured my issue.

We use two periods to return to the root directory and then into the fonts folder (or wherever your file is placed) in src:url(“../fonts/font-name.ttf).

I hope this is useful to someone in the future:)

Answered by BlakeWebb

Post is based on https://stackoverflow.com/questions/24990554/how-to-include-a-font-ttf-using-css