Search code examples
htmlcssserverfont-facelocal

Font-face working on local but not on server

like the title say font-face is not working on internet but it's working on local, I don't understand why. Can someone help me ? Here's my code:

@font-face { font-family: 'ocraextended'; src: url('font/OCRAEXT.ttf') format('truetype'); }

Solution

  • If you have installed the font on your PC or Mac it would display in your browser but not on systems where it's not installed. You will have to upload the different font files with your webpage and refer to these font files in the css.

    Example:

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

    Another option is to use Google fonts. It is free and easy to use (cross browser compatible without lots of files and font formats):

    In HTML

    <link href="https://fonts.googleapis.com/css?family=Overpass+Mono" rel="stylesheet">

    or In CSS

    @import url('https://fonts.googleapis.com/css?family=Overpass+Mono');

    Then you make a html element use the font like this:

    h1 {font-family: 'Overpass Mono', monospace;}

    PS: Mono spaced fonts are originally made to be machine readable. It's not the best human readable fonts. But hey, you know best what fits your design.