stefanobianque
New Member
Hello,
I've run into some trouble while setting up some overlays that I grabbed from a scene generator from Nerd or Die. Basically what I want to do is a "waiting scene" for the spectators to see before the stream goes live. And this Scene Maker/Generator makes a html file that can be displayed through the browser source on OBS.
When I open the local html file on my web browser (Firefox) everything is shown as I wanted and modified, but when running the exact same file on OBS Browser everything is shown as intended except the font. OBS ignores it and uses instead a default one (Times New Roman. The one I want displayed is League Spartan Bold which I have locally installed. Also found here: http://allfont.net/download/league-spartan/). See images below
How it looks on Firefox:
How it looks on OBS:
And the reason for this is most likely a conflicting line of code (which I have no idea how to solve, since my coding skills are basically non-existent). So my question is as follows: Do you think you can help me sort the code out, or at least point me in the right direction to fix it myself? Thanks in advance!
If it is on any interest:
Using Windows 10 Pro x64 and OBS Studio 21.1.2 x64
Here is the HTML code:
Here is the JavaScript code from the settings.js file:
I've run into some trouble while setting up some overlays that I grabbed from a scene generator from Nerd or Die. Basically what I want to do is a "waiting scene" for the spectators to see before the stream goes live. And this Scene Maker/Generator makes a html file that can be displayed through the browser source on OBS.
When I open the local html file on my web browser (Firefox) everything is shown as I wanted and modified, but when running the exact same file on OBS Browser everything is shown as intended except the font. OBS ignores it and uses instead a default one (Times New Roman. The one I want displayed is League Spartan Bold which I have locally installed. Also found here: http://allfont.net/download/league-spartan/). See images below
How it looks on Firefox:
How it looks on OBS:
And the reason for this is most likely a conflicting line of code (which I have no idea how to solve, since my coding skills are basically non-existent). So my question is as follows: Do you think you can help me sort the code out, or at least point me in the right direction to fix it myself? Thanks in advance!
If it is on any interest:
Using Windows 10 Pro x64 and OBS Studio 21.1.2 x64
Here is the HTML code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scene Maker - Nerd or Die</title>
<script src="Settings/settings.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="assets/css/main.css">
<link href="http://allfont.net/allfont.css?fonts=league-spartan" rel="stylesheet" type="text/css" />
<style>
body {
font-family: 'League Spartan Bold', arial;
font-size: 48px;
}
</style>
<link rel="icon" href="http://nerdordie.com/wp-content/uploads/2016/05/cropped-NoDFavicon-32x32.png" sizes="32x32"/>
<link rel="icon" href="http://nerdordie.com/wp-content/uploads/2016/05/cropped-NoDFavicon-192x192.png" sizes="192x192"/>
<link rel="apple-touch-icon-precomposed" href="http://nerdordie.com/wp-content/uploads/2016/05/cropped-NoDFavicon-180x180.png"/>
<meta name="msapplication-TileImage" content="http://nerdordie.com/wp-content/uploads/2016/05/cropped-NoDFavicon-270x270.png"/>
</head>
<body>
<div id="scene">
<div id="bg">
<div id="image">
<img src="Background/bg.png" onError="this.style.display='none';">
<img src="Background/bg.jpg" onError="this.style.display='none';">
</div>
<div id="video">
<video width="1920" height="1080" autoplay loop muted>
<source src="Background/bg.mp4" type="video/mp4">
<source src="Background/bg.ogg" type="video/ogg">
</video>
</div>
<div id="overlay"></div>
<div id="frame" class="bg-accent"></div>
</div>
<div id="branding">
<div id="brandImg">
</div>
<span id="title" class="primaryFont"></span>
<span id="subtitle" class="secondaryFont"></span>
</div>
<div id="updates">
<div id="social">
<div id="tw" class="item">
<div class="network">
<div class="borderTop"></div>
<div class="icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>
<div class="inner">
<div id="twitterHeader" class="socialHead primaryFont">Follow Us On Twitter</div>
<div id="twitter" class="socialName primaryFont"></div>
</div>
</div>
</div>
<div id="fb" class="item">
<div class="network">
<div class="borderTop"></div>
<div class="icon"><i class="fa fa-facebook" aria-hidden="true"></i></div>
<div class="inner">
<div id="facebookHeader" class="socialHead primaryFont">Like Us On Facebook</div>
<div id="facebook" class="socialName primaryFont"></div>
</div>
</div>
</div>
<div id="in" class="item">
<div class="network">
<div class="borderTop"></div>
<div class="icon"><i class="fa fa-instagram" aria-hidden="true"></i></div>
<div class="inner">
<div id="instagramHeader" class="socialHead primaryFont">Follow Us On Instagram</div>
<div id="instagram" class="socialName primaryFont"></div>
</div>
</div>
</div>
<div id="yt" class="item">
<div class="network">
<div class="borderTop"></div>
<div class="icon"><i class="fa fa-youtube" aria-hidden="true"></i></div>
<div class="inner">
<div id="youtubeHeader" class="socialHead primaryFont">Subscribe On YouTube</div>
<div id="youtube" class="socialName primaryFont"></div>
</div>
</div>
</div>
<div id="membership" class="item">
<div class="network">
<div class="borderTop"></div>
<div class="icon"><i class="fa fa-check-square-o" aria-hidden="true"></i></div>
<div class="inner">
<div id="membershipHeader" class="socialHead primaryFont">Become A Member!</div>
<div id="member" class="socialName primaryFont">XXXX</div>
</div>
</div>
</div>
<div id="donate" class="item">
<div class="network">
<div class="borderTop"></div>
<div class="icon"><i class="fa fa-money" aria-hidden="true"></i></div>
<div class="inner">
<div id="donateHeader" class="socialHead primaryFont">Donate!</div>
<div id="donation" class="socialName primaryFont">XXXX</div>
</div>
</div>
</div>
<div id="meeting" class="item">
<div class="network">
<div class="borderTop"></div>
<div class="icon"><i class="fa fa-bullhorn" aria-hidden="true"></i></div>
<div class="inner">
<div id="meetingHeader" class="socialHead primaryFont">Follow Us Live!</div>
<div id="meet" class="socialName primaryFont">XXXX</div>
</div>
</div>
</div>
</div>
<div id="schedule">
<div id="week" class="item">
<div class="day">
<div class="borderTop"></div>
<div class="inner">
<div class="scheduleHead primaryFont">Sunday 1 July - Friday 6 July</div>
<div id="mon" class="scheduleTime primaryFont"></div>
</div>
</div>
<div class="day">
<div class="borderTop"></div>
<div class="inner">
<div class="scheduleHead primaryFont">Saturday 7 July</div>
<div id="sat" class="scheduleTime primaryFont"></div>
</div>
</div>
<div class="day">
<div class="borderTop"></div>
<div class="inner">
<div class="scheduleHead primaryFont">Sunday 8 July</div>
<div id="sun" class="scheduleTime primaryFont"></div>
</div>
</div>
</div>
</div>
</div>
<div id="list">
<div id="one" class="event">
<div class="borderLeft"></div>
<div id="followName" class="name primaryFont"> </div>
<div id="followLine" class="type secondaryFont"></div>
</div>
<div id="two" class="event">
<div class="borderLeft"></div>
<div id="tipName" class="name primaryFont"> </div>
<div id="tipLine" class="type secondaryFont"></div>
</div>
<div id="three" class="event">
<div class="borderLeft"></div>
<div id="bigTipName" class="name primaryFont"> </div>
<div id="bigTipLine" class="type secondaryFont"></div>
</div>
<div id="four" class="event">
<div class="borderLeft"></div>
<div id="subName" class="name primaryFont"> </div>
<div id="subLine" class="type secondaryFont"></div>
</div>
</div>
<div id="countdown">
<div id="timer">
<div id="time" class="primaryFont"></div>
<div id="message" class="secondaryFont">til’ the stream starts!</div>
<div id="endMessage" class="primaryFont">Let's Go</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript">
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.text(minutes + ":" + seconds);
if (--timer < 0) {
timer = 0;
$('#time').hide();
$('#message').hide();
$('#endMessage').html(settings.countdown.countdownOverMessage);
$('#endMessage').css("display", "block");
}
}, 1000);
}
jQuery(function ($) {
var timeOfCountdown = 60 * minutes,
display = $('#time');
startTimer(timeOfCountdown, display);
});
$("video").attr("loop","loop");
</script>
</body>
</html>Here is the JavaScript code from the settings.js file:
JavaScript:
var settings = {"options":{"backgroundType":"image","backgroundOverlayOpacity":"0.7","backgroundBlur":"2","backgroundScale":"1","displayBranding":"yes","logoOpacity":"0.3","logoScale":"1.2","frameWidth":"0","sceneTitle":"Scene Title","tagline":"We're about to go live!"},"colors":{"backgroundOverlay":"rgba(255, 255, 255, 1)","accentColor":"rgba(25, 72, 157, 1)","frameColor":"rgba(25, 72, 157, 1)","primaryTextColor":"rgba(25, 72, 157, 1)","subTextColor":"rgba(249, 197, 52, 1)","contentBackgrounds":"rgba(255, 255, 255, 1)"},"labels":{"displayLabels":"no","labelOneHeading":"","labelOnePath":"","labelTwoHeading":"","labelTwoPath":"","labelThreeHeading":"","labelThreePath":"","labelFourHeading":"","labelFourPath":""},"schedule":{"displaySchedule":"yes","sunday":"Kl.: 12:00 - 13:00","monday":"Kl.: 12:00 - 13:00","tuesday":"12:00 - 13:00","wednesday":"12:00 - 13:00","thursday":"12:00 - 13:00","friday":"12:00 - 13:00","saturday":"Kl.: 15:00 - 16:00"},"scaling":{"socialMediaScale":"2","labelsScale":1,"scheduleScale":1.5,"countdownScale":1},"fonts":{"primaryFont":"League Spartan Bold","subFont":"League Spartan Bold","titleSize":124,"titleVerticalOffset":"0","subtitleSize":"70","subtitleVerticalOffset":0,"labelNameSize":20,"labelNameVerticalOffset":0,"labelHeaderSize":"12","labelHeaderVerticalOffset":0,"countdownTimeSize":"80","countdownTimeVerticalOffset":0,"countdownMessageSize":"30","countdownMessageVerticalOffset":0,"countdownEndMessageSize":60,"countdownEndMessageVerticalOffset":0},"countdown":{"displayCountdown":"yes","countdownTime":"15","countdownMessage":"minutes left until the stream starts!","countdownOverMessage":"Going live now!"},"social":{"displaySocial":"yes","twitch":"","twitterHeader":"Follow Us on Twitter!","twitter":"@xxxx","facebookHeader":"Like Us On Facebook!","facebook":"fb.me/xxxx","instagramHeader":"Follow Us On Instagram!","instagram":"@xxxx","youtubeHeader":"Subscribe on YouTube!","youtube":"XXXX"}};