postcss-font-magician doesn't work

[wiadev]

Hi.
I'm trying to load custom fonts but it doesn't work.

require("postcss-font-magician")({
                  custom: {
                    'Brandon Grotesque': {
                      variants: {
                        normal: {
                          900: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-black-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-black-webfont.woff',
                            }
                          },
                          700: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-bold-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-bold-webfont.woff',
                            }
                          },
                          500: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-medium-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-medium-webfont.woff',
                            }
                          },
                          400: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-regular-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-regular-webfont.woff',
                            }
                          },
                          300: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-light-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-light-webfont.woff',
                            }
                          },
                          100: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-thin-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-thin-webfont.woff',
                            }
                          }
                        },
                        italic: {
                          900: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-blackitalic-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-blackitalic-webfont.woff',
                            }
                          },
                          700: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-bolditalic-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-bolditalic-webfont.woff',
                            }
                          },
                          500: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-mediumitalic-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-mediumitalic-webfont.woff',
                            }
                          },
                          400: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-regularitalic-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-regularitalic-webfont.woff',
                            }
                          },
                          300: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-lightitalic-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-lightitalic-webfont.woff',
                            }
                          },
                          100: {
                            url: {
                              woff2: './src/styles/fonts/brandongrotesque-thinitalic-webfont.woff2',
                              woff: './src/styles/fonts/brandongrotesque-thinitalic-webfont.woff',
                            }
                          }
                        }
                      }
                    }
                  }
                }),

I've been struggling this for a day and can't still find a solution.

Thanks

[rajdee]

Hi @wiadev Maybe you forgot to use 'Brandon Grotesque' font-family in your css?

[romainmenke]

Going to close because the OP never responded.
Happy to revisit if new info is provided.