I’m using Wix Studio. I need to add a custom front (Manrope Bold) to iframe code. The code is for a typewriter text effect. At the moment the code will only let me specify the Arial font. I have already installed Manrope Bold into the site for use in my various text elements across the site. How do I set this up so I can us Manrope in the iFrame? thanks
Hi Josh. Is your iFrame element an embed? I recently completed a project where I had to deal with making custom embeds even though it wasnt provided as an option through the widget. Share more details about your specific need and your website so I can figure out if the workaround I used will work for your need.
1 Like
You are talking about a code, which you do not even show.
Maybe you first should provide the code, you want to be modified ? ? ?
Hi. I used; Add Elements > Quick Add > iFrame. Not sure whether this is an embed of not?
The site is https://www.listlessapp.com/. The iFrame I’m referring to is Typewriter text effect - second line of the main heading of the homepage. As mentioned, I just need to change the font of this typewriter effect, to Manrope. Simply typing Manrope into the iFrame code does not work. I’ve attached the code in my other response in this thread.
I have attached the code below in a google doc, though I think it is irrelevant in this case as I can’t simply add the font name to the code to get it to display;
Check it out…
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<title></title>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
html {
min-height: 100%;
overflow: hidden;
}
body {
color: #fff;
font-family: "Arial", sans-serif;
font-size: 100px!important;
background-color: transparent;
position: relative;
}
.line-1 {
position: relative;
top: 50%;
margin: 0 auto;
border-right: 1px solid rgba(255, 255, 255, 0.75);
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
.anim-typewriter {
animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal;
-webkit-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal;
-moz-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal;
-o-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal;
}
.menu-container {
position: fixed;
bottom: 10px;
right: 10px;
background-color: rgba(100, 210, 0, 0.7);
padding: 1px;
border-radius: 3px;
height: auto;
display: none;
text-align: center;
}
.menu-container.active {display: block;}
.menu-container select {margin: 5px;}
.menu-button {
position: fixed;
bottom: 10px;
right: 10px;
background-color: rgba(100, 210, 0, 0.7);
padding: 1px;
border-radius: 10%;
cursor: pointer;
}
</style>
</head>
<body>
<section class="cd-intro">
<div id="app"></div>
<div class="menu-button" id="menuButton">Menu</div>
<div class="menu-container" id="menuContainer">
<select id="fontSelector"></select>
<select id="sizeSelector"></select>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.js"></script>
<script>
var app = document.getElementById("app");
var typewriter = new Typewriter(app, {
loop: true,
});
typewriter
.typeString("Checklists")
.pauseFor(2500)
.deleteAll()
.typeString("Grocery lists")
.pauseFor(2500)
.deleteAll()
.typeString("Packing lists")
.pauseFor(2500)
.start();
document.getElementById("menuButton").addEventListener("click", function() {
var menuContainer = document.getElementById("menuContainer");
menuContainer.classList.toggle("active");
});
var fontOptions = ["Arial", "Helvetica", "Tahoma", "'Manrope', sans-serif"];
var fontSelector = document.getElementById("fontSelector");
fontOptions.forEach(function(option) {
var opt = document.createElement("option");
opt.value = option;
opt.textContent = option;
fontSelector.appendChild(opt);
});
fontSelector.addEventListener("change", function() {
document.body.style.fontFamily = fontSelector.value;
var menuContainer = document.getElementById("menuContainer");
menuContainer.classList.remove("active");
});
var sizeOptions = ["16px", "20px", "24px", "28px", "32px", "38px", "45px", "70px", "100px", "200px"];
var sizeSelector = document.getElementById("sizeSelector");
sizeOptions.forEach(function(option) {
var opt = document.createElement("option");
opt.value = option;
opt.textContent = option;
sizeSelector.appendChild(opt);
});
sizeSelector.addEventListener("change", function() {
app.style.fontSize = sizeSelector.value;
var menuContainer = document.getElementById("menuContainer");
menuContainer.classList.remove("active");
});
</script>
</body>
</html>
I’m also having the same problem
1 Like
This is not helpful… I have no clue what I’m looking for here. Check what out?
Isn’t this what you need?
Maybe i misunderstood something?
My OP clearly explains what I need
Try using the code @russian-dima provided in your iFrame, I believe it has the effect you desire
Thanks @marvellous_adeogun . @CODE-NINJA the font you added to the attached code is closer to, but is still not Manrope Bold - its a different font. There is also the word “Menu” in green at the end of the text also? See screenshot;
https://www.awesomescreenshot.com/image/46460967?key=fa75d2057be673074c748c5855658d46
Exactly. This menu was generated by me to give you the opertunity to change size and FONT of your TEXT.
You can add further FONTS to the shown script and you also can add more of different hardcoded text-size-options to the script.
Open menu and make your choice.
You do not need the menu → cut out the corresponding CODE for the menu and the menu will be gone.
Did you ever open the menu ?
This is what i came to the forum asking to do because i do not know where to edit it in the code! Please could you remove the menu, edit the code so that it displays manrope bold, then send a screenshot of the line in the code i need to edit to display different fonts in future?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<title></title>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap" rel="stylesheet">
<style>
html {
min-height: 100%;
overflow: hidden;
}
body {
color: #fff;
font-family: "Manrope", sans-serif; /* Changed to Manrope Bold */
font-size: 100px!important;
background-color: transparent;
position: relative;
}
.line-1 {
position: relative;
top: 50%;
margin: 0 auto;
border-right: 1px solid rgba(255, 255, 255, 0.75);
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
.anim-typewriter {
animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal;
-webkit-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal;
-moz-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal;
-o-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal;
}
</style>
</head>
<body>
<section class="cd-intro">
<div id="app"></div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.js"></script>
<script>
var app = document.getElementById("app");
var typewriter = new Typewriter(app, {
loop: true,
});
typewriter
.typeString("Checklists")
.pauseFor(2500)
.deleteAll()
.typeString("Grocery lists")
.pauseFor(2500)
.deleteAll()
.typeString("Packing lists")
.pauseFor(2500)
.start();
</script>
</body>
</html>
Menu is gone and setted-up as MANROPE-BOLD → good luck!
For example to change to TimeNewRoman…
1 Like
This works, thanks! The style of the blinking cursor seems to have changed though. It looks shorter/thicker than the original. Is there any way to change it back?
You are asking people to give you the exact code you need when they don’t have to do that. If you’d rather hire a coder to do the work for you, then you could ask if they are available.
Other than that, this forum is meant to guide you to find your own answer not to write the codes “on demand”.
It’s good that you used this forum as a resource, but they have already give you the basic code structure that you need. Try tweaking it yourself until you get the desired result you are needing.
1 Like