# Controlling fonts (in a div\_ in reactjs

**URL:** https://forum.kirupa.com/t/controlling-fonts-in-a-div-in-reactjs/643039
**Category:** web dev
**Created:** [June 1, 2020, 4:58am UTC](https://forum.kirupa.com/t/controlling-fonts-in-a-div-in-reactjs/643039 "2020-06-01T04:58:16Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![SunbeamRapier](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sunbeamrapier/32/11782_2.png) [@SunbeamRapier](https://forum.kirupa.com/u/SunbeamRapier)
#### Post date: [June 1, 2020, 4:58am UTC](https://forum.kirupa.com/t/controlling-fonts-in-a-div-in-reactjs/643039/1 "2020-06-01T04:58:16Z")

</div>

I saw you had another article along these lines, but using the old class structure in reactJS. I am trying to figure out how to control the font in a div so that I can change it on mouse-over and on mouse-click. I am using two variants of the same font: Industry Inc outline.ttf and the solid.ttf variant.

in the header.js file I have this code:

const [fontName, setFontName] = useState(“outline”);

```
 <div>     
    <div class= "flex-container-header" style=fontFamily: {{fontName}}>
        <div class="linkcontainer">Home</div>
        <div class="linkcontainer">About</div>
        <div class="linkcontainer">Technology</div>
        <div class="linkcontainer">Marketing</div>
        <div class="linkcontainer">Support</div>
        <div class="linkcontainer">Modules</div>
    </div>    
</div> 

```

But whatever I try I get a parsing error.

In the first pass I want to set all the divs to the outline font. On mouse-over I wand to change the font to the solid variant and change the color. on-click I want to change the div background colour as well.

In the css I have the font[family commented out - to give this:

```
.flex-container-header {
    display: flex;
    background-color: #7d5a5a;
    background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");></background-image:alt="carbonfibre");
    justify-content: flex-end;
}

.linkcontainer {
    display: inline-block;
    padding: 4px 8px 8px 4px;
    margin: 4px 4px 4px 4px;
    background-color: grey;
    background-image: "https://www.transparenttextures.com/patterns/brushed-alum.png";
    text-align: center;
    color: #98d6ea;
    /*font-family: "Oxooutline";*/
    font-size: 2.5rem;
    position: relative;
}

```

I have looked on w3schools and MDN but their examples are all trivial and there i no mention of changing the font in an in-line style.

I would be grateful for any assistance 🙂  
Rapier (Sydney)

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 1, 2020, 5:41am UTC](https://forum.kirupa.com/t/controlling-fonts-in-a-div-in-reactjs/643039/2 "2020-06-01T05:41:13Z")

</div>

Hi @SunbeamRapier - at what point do you get the parsing error? Do you get it right off the bat? Or does the error happen when you **mouse-over** or **click**?