How to include a font .ttf using CSS?

by

Only providing .ttf file for webfont won’t be good enough for cross-browser support. The best possible combination at present is using the combination as :

@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 : Transfonter.org.

Also , modern browsers are shifting towards .woff font , 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 : http://css-tricks.com/snippets/css/using-font-face/

Look for browser support : Can I Use fontface

More Related Contents:

  1. How to align 3 divs (left/center/right) inside another div?
  2. Styling an input type=”file” button
  3. How to add images in select list?
  4. Why does z-index not work?
  5. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  6. :after and :before CSS pseudo elements hack for Internet Explorer 7
  7. Percent pie chart with css only
  8. Extend bootstrap row outside the container
  9. Why is my Grid element’s height not being calculated correctly?
  10. html/css hexagon with image inside
  11. Margin top in inline element
  12. CSS image resize issue
  13. HTML + CSS: Ordered List without the Period?
  14. How to remove “Invisible space” from HTML [duplicate]
  15. How can I center a div within another div? [duplicate]
  16. Slanted diagonal line in html or css?
  17. Chrome does not expand flex parent according to children’s content [duplicate]
  18. How to prevent line break at hyphens in all browsers
  19. Can I override inline !important?
  20. CSS property as SASS mixin value [duplicate]
  21. Preserve line breaks in textarea
  22. How position absolute and fixed block elements get their dimension?
  23. Ring-shaped process spinner with fading gradient effect around the ring
  24. Why is there a default margin on the element? [closed]
  25. set css border to end in a 90 instead of a 45 degree angle
  26. extra space when centering elements using flexbox
  27. @Media print css
  28. How To Add CSS3 Transition With HTML5 details/summary tag reveal?
  29. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  30. Balanced text wrapping in HTML

Leave a Comment