0

I need to use a font in an HTML page but I also need it to work offline, when I have the project on my PC without internet connection. Since I can download the .ttf file from Google Fonts, is there a way to actually include the font without importing it from fonts.googleapis.com?

Eärendil Baggins
  • 552
  • 1
  • 8
  • 23

2 Answers2

1

You can certainly do that. Use the @font-face in your .css file

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

the URL would be specified accordingly, depending on what folder you have the font in, relative to the CSS file.

branimalus
  • 28
  • 9
1

I believe you can include the font on your server/ local storage and use a local link, instead of the url.

@font-face{
    font-family: /*name here*/
    font-style: normal
    font-weight: 250
    src: url('') /* replace with local link/ format*/
}

See: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp for more detail

Checkmate_001
  • 54
  • 9