Controlling fonts (in a div_ in reactjs

programming web dev
1

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 :slight_smile:
Rapier (Sydney)

2

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?