Do not know how to change font within code-CodePudding

Hey I'm trying to change the font of everything in this code block and I'm not sure how this is what is given

<div>
            <iframe 
                id="waitlist_iframe"
                title="waitlist" 
                frameborder="0" 
                marginheight="0" 
                marginwidth="0" 
                width="600px"
                height="400px"
                src="{code}"
                style="border-radius: 8px;"
            >

            </iframe>
  
        </div>

        <script>
            const url = new URL(window.location.href);
            const ref_id = url.searchParams.get('ref_id');
            if (ref_id) {
                document.getElementById("waitlist_iframe").src  = `?ref_id=${ref_id}`;
            }

  

        </script>

.container--waitlistapi // outermost div containing the component
.container--waitlistapi > h1 // main heading
.button--waitlistapi // main submit button
.input--waitlistapi // input fields
.statusToggleLabel // "Signed up before?" label
.statusToggleLabel > a // "Check your status" link

Nothing is changing when I attempt

CodePudding user response：

Option-1: Add font-family as inline style
Option-2: You have already id selector waitlist_iframe. use this selector to add styles. option1:

<iframe 
                id="waitlist_iframe"
                title="waitlist" 
                frameborder="0" 
                marginheight="0" 
                marginwidth="0" 
                width="600px"
                height="400px"
                src="{code}"
                style="border-radius: 8px;font-family: 'Times New Roman', sans-serif;"
            >

            </iframe>

CodePudding user response：

This is an External CSS option. Personally I prefer using external CSS as much as I can. If you need help with HTML/CSS fundamentals feel free to message me.

Try adding a class to your opening div tag. Like this:

<div >

Then in your .css file just specify the font you want to use for your class, like this:

.waitlist--iframe {
         font-family: 'Times New Roman', sans-serif;
     }

Just replace 'Times New Roman' with whatever font you want. That way it assigns that font-family only to that div element (and whatever other element you want to add that class to.