'CSS's @font-face local() won't locate other font styles than "regular" and "bold"

So... I installed some fonts (Roboto) on my PC (linux ubuntu) and I want to use them in my CSS using @font-face, but when I defined those local() inside of src: ; like this for eg. ->

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto-Regular'), url('Roboto.ttf') format('truetype');
  font-weight: 400;
}

.

Problem:

Only font styles/weights that work are - font-weight: 400 (regular) and font-weight: 600 (bold), but when I change it to font-weight: 500 (medium) or any other, it just doesn't change!

.

Things I tried to fix the problem:

1) Defining another @font-face

@font-face {
  font-family: 'Roboto';
  src: local('Roboto Medium'), local('Roboto-Medium'), url('Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
}

Result: Console error: Failed to decode downloaded font: pathToMySite/css/Roboto-Medium.ttf and it just stays the same (regular)

2) I tried to list all fonts, to see if those fonts are actually installed (using linux command: fc-list | grep "Roboto" which just outputs all locally installed fonts (that has "Roboto" in them)

Output:

lots/of/paths/Roboto-Regular.ttf: Roboto:style=Regular
lots/of/paths/Roboto-Italic.ttf: Roboto:style=Italic
lots/of/paths/Roboto-Medium.ttf: Roboto Medium:style=Regular
lots/of/paths/Roboto-MediumItalic.ttf: Roboto Medium:style=Italic
lots/of/paths/Roboto-Bold.ttf: Roboto:style=Bold
lots/of/paths/Roboto-BoldItalic.ttf: Roboto:style=Bold Italic
lots/of/paths/Roboto-Light.ttf: Roboto Light:style=Regular
lots/of/paths/Roboto-LightItalic.ttf: Roboto Light:style=Italic
lots/of/paths/Roboto-Thin.ttf: Roboto Thin:style=Regular
lots/of/paths/Roboto-ThinItalic.ttf: Roboto Thin:style=Italic

(there were even more paths to different folders, but file names were always the same)

3) I tried to go to linux "fonts" app, to see if those fonts are actually installed.

All Roboto variations (thin, light, regular, medium, bold, black) were there and visibly different (in case medium and regular looked the same)

4) And yes I refreshed it using CTRL + F5 and yes I have cache disabled.

Long story short: all fonts are installed on the system, but CSS just doesn't see anything other than regular and bold weight or can't locate them? Or I don't know why.

Can you help me solve this? Thank you for your help!

htmlcssfontsfont-facelocal


Solution 1:[1]

Dont use local, just url, as:

@font-face {font-family: 'Regular'; src: url('fonts/Roboto-Regular.ttf'); }
@font-face {font-family: 'Light'; src: url('fonts/Roboto-Light.ttf'); }
@font-face {font-family: 'Medium'; src: url('fonts/Roboto-Medium.ttf'); }
@font-face {font-family: 'Bold'; src: url('fonts/Roboto-Bold.ttf'); }

CSS:

.my_div{
   font-family: Light;
}

Solution 2:[2]

I was facing the same issue and after some try I find out a pretty simple solution that worked for me.

  1. Define the custom font, this will be downloaded and used if the font is not installed
@font-face {
  font-family: 'RobotoDL';
  src: url('path/to/Roboto-Medium.woff2') format('woff2'),
       url('path/to/Roboto-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
// Define it for each font-weight and font-style
  1. Define the font-family using the installed font name as first option and the custom font name as fallback, for example
* {
  font-family: 'Roboto', 'RobotoDL', Arial,  sans-serif;
  // font-name installed, font-name custom, standard fallbacks
}

In this way:

  • If the user does have the font installed than the browser will use 'Roboto' and it won't download anything.
  • If the user doesn't have the font installed, the browser will use 'RobotoDL' and it will download the files described by the font-face rules.

I read online that using the font-family property like this

font-family: 'installed font name', fallbacks, etc;

doesn't get the installed font and will instead get the fallbacks. In my case it does get the installed font (without any download), so I don't know for sure if this solution will works or there's something that I have missed, but I'd give it a try.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 G3ck
Solution 2

Related Questions