How to include a font ttf using CSS

Question

I have a problem with my code  Because I want to include a global font for my page and I downloaded a  ttf file  And I include it in my main CSS but my font wont change   Here s my simple 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      I don t know where did I go wrong  Can you help me with this  Thanks

User · Answer

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

User · Answer

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

User · Answer

You can use font face like this    font-face     font-family  Name-Of-Font     src  url  yourfont ttf   format  truetype

User · Answer

I know this is an old post but this solved my problem    x000D   x000D   font-face  x000D    font-family   Font Name   x000D    src  url     fonts font-name ttf   format  truetype    x000D    x000D   x000D   x000D    notice src url     fonts font-name ttf    we use two periods to go back to the root directory and then into the fonts folder or wherever your file is located   hope this helps someone down the line   happy coding

[html] How to include a font .ttf using CSS?

Examples related to html

Examples related to css