Is this the right way to set custom font? [SOLVED]-CodePudding

I have a font in

/static/font/input_regular.ttf

that i want to use for code tags, and i have this in my styles.css:

@font-face {
  font-family: "Input_reg";
  src: url("/font/input_regular.ttf") format("truetype");
}

pre, code {
  font-family: "Input_reg", monospace;
  font-size: inherit;
}

The rest of the site is using Source Code Pro font. Problem is, it doesn’t work, and never loads this new font, instead it just uses Source Code Pro, like the rest of the page. what am i doing wrong here? If it matters, the site is using hugo, and is hosted on github pages.

EDIT: solved by converting .ttf to .woff/woff2 pair. Weird, but i'm satisfied.

CodePudding user response：

have you tried

@font-face {
  font-family: "input_reg";
  src: url("font/input_regular.ttf");
}

without the trailing / in the url. Also you dont need to specify thats a trueType and having all lowercase is always a good idea for nearly anything in the internet :-) If that doesnt help, hit F12 in your browser, reload the page und look what URL the font is loaded from - it's probably wrong.

CodePudding user response：

To serve Deepest Possible Browser Support.

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

pre, code {
  font-family: "Input_reg", monospace;
  font-size: inherit;
}