How to use multiple fonts in js string?

Question

How do I achieve multiple family-fonts in one string in javascript

JS:

    function formatTime (diff1) {
       var m = pad(parseInt(diff1/60))
       var diff = diff1-(m*60);
       var s = pad(diff);
            return m +":"+ s + "/" + "20";    
}

I want the "/" to have a different font-family than the other parts of the string who are using the font of the class in the html file:

<div class="timer2" id="demo"></div>

how can I achieve this?

I want to use a font that I imported to my css file.

I want it to look like this

good

instead of this:

bad

Does [this question](https://stackoverflow.com/questions/56670370/different-font-family-for-two-different-parts-of-the-same-string) help you? — Toasty, Apr 20 '21 at 11:59
What do you want the output to look like? It’s hard to tell what you intend because you’re using single character variables. What does formatTime have to do with fonts? — mikemaccana, Apr 20 '21 at 12:00
Javascript doesn't have fonts. It's just computer code. However, you can display text in a browser through HTML and CSS, and there you can change the font — Jeremy Thille, Apr 20 '21 at 12:03
I’m on mobile but this is a css question. You want three spans, before the slash, the slash, and after the slash. Use a different class for the slash span with the narrower font. — mikemaccana, Apr 20 '21 at 12:07
You can wrap the / in its own element with its own class having a different font family. Example for built in tag like this would tbe the `` tag — The Fool, Apr 20 '21 at 12:09
@mikemaccana yes but how do I use different class for the slash? — likesum, Apr 20 '21 at 12:10

score 0 · Answer 1 · answered Apr 20 '21 at 12:09

0

You could set the HTML of the #demo element and convert the '/' to a <span class="sep" /> element and declare some styles for the .sep class.

const pad = s => (s + '').padStart(2, '0');

const formatTime = diff1 => {
  const m = pad(parseInt(diff1 / 60))
  const diff = diff1 - (m * 60);
  const s = pad(diff);
  return `${m}:${s}<span class="sep"></span>20`;
}

const demo = document.querySelector('#demo');
let time = 0;

const update = () => {
  demo.innerHTML = formatTime(time);
  time++;
};

update();
setInterval(update, 1000);

#demo {
  font-weight: bold;
}

.sep {
  font-family: monospace;
  font-weight: normal;
  margin: 0 0.25em;
}

.sep::after {
  content: '/';
}

<div class="timer2" id="demo"></div>

answered Apr 20 '21 at 12:09

Mr. Polywhirl

42,981
12
84
132

can you also do this in plain js? – likesum Apr 20 '21 at 12:18
This will make window.demo due to the ID – mikemaccana Apr 20 '21 at 12:19
@likesum this is "plain js" – Mr. Polywhirl Apr 20 '21 at 12:23
@mikemaccana using `window.` is [not recommended...](https://stackoverflow.com/questions/6994139/why-windowid-document-getelementbyid-id) It was an asinine thing introduced by IE. – Mr. Polywhirl Apr 20 '21 at 12:25
Yes @Mr.Polywhirl that is exactly what my comment is saying. Why are you addressing me? – mikemaccana Apr 20 '21 at 15:28
@mikemaccana you commented saying, _**"This will make window.demo due to the ID"**_. You directed it at me. I was replying, saying that this is BAD practice. I linked you to a thread explaining why it is a bad idea to access elements by their ID from the `window`. – Mr. Polywhirl Apr 20 '21 at 15:30
@Mr.Polywhirl Yes. I pointed out a bad practice in your code. I am not sure why you are addressing me if you agree. – mikemaccana Apr 20 '21 at 15:34
@mikemaccana wait, what is bad practice about my code? I never used `window.demo`, I created a global variable called `demo` by retrieving it by ID. This is the proper way. – Mr. Polywhirl Apr 20 '21 at 17:58
@Mr.Polywhirl you created `window.demo` with `
`. That's the antipattern.
– mikemaccana Apr 22 '21 at 08:11

score 0 · Answer 2 · answered Apr 20 '21 at 15:32

We just have a different class for the / character:

<div class="time">
  12
  <span class="divider">/</span>
  23
</div>

.time {
  font-family: "something";
}

.divider {
  font-family: "something-different";
}

Here's a working JSfiddle

You don't need JS here. Fonts are normally controlled by CSS, not JS.

How to use multiple fonts in js string?

2 Answers2