Downloaded Font Won't Display Properly

Font not showing properly in HTML page

You need to import by Google fonts or with @font-face.

In Google fonts you can use import by HTML or CSS:

On your HTML:

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

On your CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

If you can't find you font on google.com/fonts, you can create your own font face kit: http://www.fontsquirrel.com/tools/webfont-generator (you can generate everything, including the css code to embed font), so not all fonts can be converted. See the path to make it in the correct url

Failed to decode downloaded font

In the css rule you have to add the extension of the file.
This example with the deepest support possible:

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

EDIT:

"Failed to decode downloaded font" means the font is corrupt, or is incomplete (missing metrics, necessary tables, naming records, a million possible things).

Sometimes this problem is caused by the font itself. Google font provides the correct font you need but if font face is necessary i use Transfonter to generate all font format.

Sometimes is the FTP client that corrupt the file (not in this case because is on local pc). Be sure to transfer file in binary and not in ASCII.

Custom Font not displaying in my webpage

How about you try this in your fonts.css

@font-face {   
font-family: 'FuturaStd-HeavyOblique'; 
src: url('fonts/FUTURASTD-HEAVYOBLIQUE.OTF');
}

call it back with

font-family: 'FuturaStd-HeavyOblique';  

Not sure if quotation marks matter, but I believe @type-face should be @font-face

Custom font not displaying with @font-face?

I think the way you write it (i.e. separate src definitions for all the available formats) makes the woff2 format overwrite all the others, so if a browser can't handle woff2, it won't work.

So instead of all those semicolons and repeated src, try it this way:

@font-face {
    font-family: 'Robotica';
     src: url('robotica.eot') format('embedded-opentype'),
          url('robotica.woff') format ('woff'),
          url('robotica.ttf') format ('truetype'),
          url('robotica.otf') format ('opentype'),
          url('robotica.woff2') format ('woff2');
    font-weight: normal;
    font-style: normal;
} 

(same/similar for the other font)

EDIT (moved from comment to answer): In addition, you should remove the spaces between format and the subsequent opening parenthesis of the format description (like format('woff') instead of format ('woff').

Downloadable font not displaying for Switch TextView

It transpires this is a known issue Google Issue #63250768

A fix was located in another StackOverflow question however downloadable fonts will not work with this method - until a resolution, font files must be embedded into the application, as .XML fonts will not work.

Great job, Google!

Font loading issue in Visual Studio 2019

I solved it by installing the font for all the users, which can be achieved by simply left clicking the .ttf file and selecting the "Install for all users" option.

---

Related Topics