how to list the @font-face from css in js

Question

I have the fonts declarations in css rule @font-face and I'm trying to list them with js

something like that :

css :
@font-face {font-family: font-name-1; src: ...}
@font-face {font-family: font-name-2; src: ...}
@font-face {font-family: font-name-3; src: ...}

js :
let font_list = list_my_fonts(); // ["font-name-1", "font-name-2", "font-name-3"];

i've tried :

let font_list = getComputedStyle(document.documentElement).getPropertyValue('font-face');
// empty string

or :

let font_list = Array.from(document.styleSheets);
// it gives me a big array of array in which i can't find the font-face rules

but I really don't know anything in js, so I'm having trouble knowing exactly what to do to reach my goal

score 5 · Accepted Answer · answered May 16 '21 at 17:55

5

Here you have the implementation. It uses Document.fonts property.

function list_my_fonts() {
  return Array.from(document.fonts);
}

console.log(list_my_fonts());

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap" rel="stylesheet">

answered May 16 '21 at 17:55

Ernesto Stifano

3,027
1
10
20

super ! really easy to use, exactly the solution to my pbm, thx :) – hugogogo May 17 '21 at 08:52
Great! The easiest way to get all web fonts with js . Thanks. – Mehdi Khoshnevis Feb 26 '23 at 11:40

score 1 · Answer 2 · answered May 16 '21 at 18:21

1

// get all the styleSheets
const styleSheets = Array.from(document.styleSheets);

styleSheets.forEach(styleSheet => {
  const cssRules = styleSheet.cssRules;

  // all the font-faces rules
  const rulesFontFace = cssRules.filter(rule => rule.cssText.startsWith('@font-face'));

  rulesFontFace.forEach(fontFace => {
    console.log(fontFace); // CSSFontFaceRule object
  });
});

More about CSSStyleSheet : https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

More about cssRules : https://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule/cssRules

-or-

More about CSSFontFaceRule : https://developer.mozilla.org/en-US/docs/Web/API/CSSFontFaceRule

answered May 16 '21 at 18:21

Nicolas T.

36
2

very helpfull ! i had to change it because i use @import in css, but all the important elements are there :) I'm on a local development so i got a cross-origin error, which i resolved easily thx to this post https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64/49160760#49160760, that point to this solution https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server, all i have to do is starting a server by running this command `python3 -m http.server` in my project directory – hugogogo May 17 '21 at 08:42
I don't make it the accepted answer because the answer of @Ernesto Stifano is easier, i just didn't saw it at first – hugogogo May 17 '21 at 08:51

score 0 · Answer 3 · answered May 16 '21 at 17:58

0

const font = new FontFace('myfont', 'url(myfont.woff)');

then use .load method to load this font which then return a promise

font.load().then((fetchedfont)=>{
  document.fonts.add(fetchedfont)
})
.catch((error)=>console.log(error))

you can read more at https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace

answered May 16 '21 at 17:58

Arihant Jain

817
5
17

that's an interesting feature, but i don't think it does what i'm looking for ? my fonts are already in a css file, i would like to list them. thx anyway for the answer – hugogogo May 17 '21 at 08:28

how to list the @font-face from css in js

3 Answers3