2 Replies - 472 Views - Last Post: 23 February 2014 - 01:20 PM

#1 chris98  Icon User is offline

  • D.I.C Addict

Reputation: 3
  • Posts: 555
  • Joined: 06-July 13

Custom Website Fonts From TTF File

Posted 23 February 2014 - 08:34 AM

How can I install custom fonts on my website? I have found this which I think will fit what I want quite well, but I don't know how to integrate it. The actual font is in .ttf form. I have searched but it's only telling you how to install when you don't have the file and I do.

http://www.dafont.com/marathon.font

Is This A Good Question/Topic? 0
  • +

Replies To: Custom Website Fonts From TTF File

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2875
  • View blog
  • Posts: 9,540
  • Joined: 12-December 12

Re: Custom Website Fonts From TTF File

Posted 23 February 2014 - 08:45 AM

Using the @font-face css-rule, e.g.

@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }

SO topic

PS all I did was search "install custom font to webstie" and it was the first link :whistling:
Was This Post Helpful? 0
  • +
  • -

#3 felgall  Icon User is offline

  • D.I.C Head

Reputation: 10
  • View blog
  • Posts: 76
  • Joined: 22-February 14

Re: Custom Website Fonts From TTF File

Posted 23 February 2014 - 01:20 PM

Only some browsers support ttf fonts.

To properly support as many browsers as possible you need to supply the fonts in multiple formats.

To use embedded fonts simply upload the various versions of the font to a directory on your server and then use the following code with the path to where you uploaded the files added in front of the font name in each url() statement.

note that if you leave out any of the different formats for the font or switch the order around then you will reduce the number of browsers that will be able to use the font.

@font-face {
    font-family: 'marathon';
    src: url('marathon.eot?#iefix') format('embedded-opentype'),
        url('marathon.woff') format('woff'),
        url('marathon.ttf') format('truetype'),
        url('marathon.svg#svgFontName') format('svg');
    }

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1