Dynamic fontFamily style | Mantine | Page 1

surreal pike Sep 30, 2023, 1:19 PM

#

I want to apply a fontFamily on an element dynamically, but it wouldn't appear in the browser dev tools inspection, only the font-size appears

#

import { Box, Title, Text, Container } from '@mantine/core';
import { useTaskVerses, useWordSound } from '../../hooks';
// import { useTaskVerses } from './hooks';

const WBW = () => {
  const { pageNumbers, verses } = useTaskVerses();
  // console.log(`Mushaf Page ${pageNumbers[0]}`);
  const font = verses && `Mushaf Page ${pageNumbers![0]}`;
  console.log('the font is', font);

  const { playWord } = useWordSound(verses);

  if (!verses) return 'loading..';
  // const { pageNumbers } = useTaskVerses();
  console.log({ pageNumbers });
  return (
    <Container>
      {pageNumbers?.map((page) => (
        <style key={page}>
          {`
          @font-face {
            font-family: 'Mushaf Page ${page}';
            src: url('fonts/mushaf-woff2/QCF_P${page}.woff2')
          }
          `}
        </style>
      ))}
      <Title>المطلوب اليومي - كلمة بكلمة</Title>
      {verses && (
        <div
          style={{
            // fontFamily: font,
            fontFamily: 'Mushaf Page 487',
            fontSize: '1.8rem',
          }}
        >
          {verses?.map((verse) => (
            <Text key={verse.id}>
              {verse.words.map((word) => (
                <Text
                  span
                  key={word.id}
                  style={{ fontFamily: 'Mushaf Page 487' }}
                  onClick={() => playWord(word.id)}
                >
                  {word.code_v1}
                </Text>
              ))}
            </Text>
          ))}
        </div>
      )}
    </Container>
  );
};

export default WBW;

#

useTaskVerses definition.

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const useTaskVerses = () => {
  const { data } = useQuery({
    queryKey: ['task-verses'],
    queryFn: () =>
      axios.get(import.meta.env.VITE_SERVER_URL + 'daily-task/wbw'),
  });
  const verses = data?.data.verses;
  console.log({ verses });

  const pageNumbers: number[] | undefined =
    data &&
    ([...new Set(verses.map((verse) => verse.page_number))] as
      | number[]
      | undefined);

  return {
    verses,
    pageNumbers,
  };
};

export default useTaskVerses;

craggy ferry Sep 30, 2023, 2:11 PM

#

surreal pike ```typescript import { Box, Title, Text, Container } from '@mantine/core'; impor...

You are not using `, instead, you use '

#

font-family: 'Mushaf Page ${page}';

#

It does not pick up the page

#

but rather, just the string ${page}

surreal pike Sep 30, 2023, 2:12 PM

#

in this?
{pageNumbers?.map((page) => (
<style key={page}>
{ @font-face { font-family: 'Mushaf Page ${page}'; src: url('fonts/mushaf-woff2/QCF_P${page}.woff2') } }

craggy ferry Sep 30, 2023, 2:13 PM

#

Yes

#

To use ${page} you need to wrap the string with a ` instead of '

surreal pike Sep 30, 2023, 2:13 PM

#

no, that is not the problem

#

the font face definition get to the browser successfully

craggy ferry Sep 30, 2023, 2:14 PM

#

Oh yes I see

#

Did not see you already wrapping with it

#

Are you using mantine v6?

surreal pike Sep 30, 2023, 2:14 PM

#

#

v7

craggy ferry Sep 30, 2023, 2:19 PM

#

What if you try a different font, because it seems weird that its not applying on a default html element

surreal pike Sep 30, 2023, 2:22 PM

#

#

different font gets applied successfully

#

craggy ferry Sep 30, 2023, 2:28 PM

#

What if you try Mushaf Page 487 !important

surreal pike Sep 30, 2023, 2:29 PM

#

not working..

craggy ferry Sep 30, 2023, 2:29 PM

#

If you try it on a different page with just a div element, does it work there? (Dont load the fonts, just apply css)

surreal pike Sep 30, 2023, 2:30 PM

#

I think the problem is in the font-face definition..

surreal pike Sep 30, 2023, 2:31 PM

#

craggy ferry If you try it on a different page with just a div element, does it work there? (...

didn't work

craggy ferry Sep 30, 2023, 2:31 PM

#

So it just doesn't show the fontfamily in element inspect?

surreal pike Sep 30, 2023, 2:31 PM

#

yes

craggy ferry Sep 30, 2023, 2:32 PM

#

weird, for me it adds it to the style but gives a warning that the font is not found

surreal pike Sep 30, 2023, 2:32 PM

#

the font-face appears

craggy ferry Sep 30, 2023, 2:34 PM

#

surreal pike I think the problem is in the font-face definition..

Can you give me the cdn url

surreal pike Sep 30, 2023, 2:34 PM

#

#

it works when I add the font-family through inspect

#

{pageNumbers?.map((page) => (
<style key={page}>
{ @font-face { font-family: 'Mushaf Page ${page}'; src: local('./fonts/mushaf-woff2/QCF_P${page}.woff2'), url(https://cdn.rawgit.com/mustafa0x/qpc-fonts/f93bf5f3/mushaf-woff2/QCF_P${page}.woff2) format('woff2'), url(https://cdn.rawgit.com/mustafa0x/qpc-fonts/f93bf5f3/mushaf-woff/QCF_P${page}.woff) format('woff'); } }

craggy ferry Sep 30, 2023, 2:35 PM

#

Are you using the pages directory or app

surreal pike Sep 30, 2023, 2:35 PM

#

I'm using react

#

plain react

craggy ferry Sep 30, 2023, 2:36 PM

#

Oh okay

surreal pike Sep 30, 2023, 2:36 PM

#

I don't like next

craggy ferry Sep 30, 2023, 2:39 PM

#

I see

#

It also now does not show for me

surreal pike Sep 30, 2023, 2:42 PM

#

so the problem doesn't have to do with mantine

craggy ferry Sep 30, 2023, 2:42 PM

#

Nope, it has to do with the fontface but give me a sec, I need to pray and then will see how it could be fixed 😜

surreal pike Sep 30, 2023, 2:43 PM

#

ok

craggy ferry Sep 30, 2023, 2:54 PM

#

I fixed it

#

I found the reason why it did not work

#

When you have a font family name with spaces, you need to put it in quotes

#

so "Mushaf Page ${page}"

#

fontFamily: `"Mushaf Page ${page}"`

#

@surreal pike

surreal pike Sep 30, 2023, 3:10 PM

#

Thanks, a lot bro, you saved my day.

#

but what a silly mistake!

craggy ferry Sep 30, 2023, 3:10 PM

#

I did not know either haha

surreal pike Sep 30, 2023, 3:11 PM

#

I thought that the backticks would be a wrapper around it

#

I get it.
fontFamily: '"Mushaf page 444", sans-serif'

#

this will not work: fontFamily: 'Mushaf page 444, sans-serif'

#Dynamic fontFamily style