Solution 1 :

i think i can give a helpful solution for you.

First, let me try to show you about how to use css selector while coding a web page.

There was more than one selector that we can use.

For this case, i should recommend you to using class selector, or maybe child selector.

/*With class selector*/
.hero-text{
    font-family: khFont;
    height: 100%;
    font-size: 55px;
    text-transform: capitalize;
    position: absolute;
    overflow: hidden;
    font-weight: normal;
    line-height: 58px;
    }

/*With child combinator selector*/
div > .hero-text{
    font-family: khFont;
    height: 100%;
    font-size: 55px;
    text-transform: capitalize;
    position: absolute;
    overflow: hidden;
    font-weight: normal;
    line-height: 58px;
    }


@font-face {
    font-family: khFont;
    src: url(/fonts/khFont.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
<div class="container">
    <img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
    <div class="hero-text">
        <h1> Welcome to the site </h1>
    </div>
</div>

For the documentation of using selector, you can read more in this link.

And the second is, let’s start to edit the class to fixing the output in the interface.

/*With class selector*/
.hero-text{
    font-family: khFont;
    height: 100%;
    font-size: 55px;
    text-transform: capitalize;
    position: absolute;
    overflow: hidden;
    font-weight: normal;
    line-height: 58px;
    display: block;
    margin: 0 auto;
    text-align: center;
    }


@font-face {
    font-family: khFont;
    src: url(/fonts/khFont.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
<div class="container">
    <img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
    <div class="hero-text">
        <h1> Welcome to the site </h1>
    </div>
</div>

For more details, you can read in these documentations:

Thank you

Solution 2 :

It’s been resolved! Turns out, in Opera, you can enable “Force Dark Pages” which I thought it would change when I clicked the setting on the page. When working with local sites, you wont be able to change the setting on the page itself, you have to go into the browser settings.

Thanks everyone for your help! 🙂

Problem :

I am working on a personal website as a beginner and I have the font available to me. When I add it with a font face on my hero banner, it shows up weirdly. I don’t know if that’s because the font just won’t work with the site or not.

Here is what I currently get:

Result of the above code

The font should be in the middle and left of the banner, and the text should be white. I tried different variations of font-face and I tried adding styles to space out the letters. I tried another response from this post.

However, that didn’t work. Any suggestions?

My hero code and CSS:

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: black;`enter code here`
}


img{
    opacity: 50%;
}
.croppedbanner {
    width: 100%;
    height: 200px;
    object-position: 0% 39%; 
    object-fit: cover;
}

.container{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

div.hero-text{
    font-family: khFont;
    letter-spacing: 5px;
    font-size: 55px;
    position: absolute;
    overflow: hidden;
    font-weight: normal;
    line-height: 58px;
    transform: translate(0px, -200px);
    margin-left: 10px;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: blue;
    -webkit-text-fill-color: red;
    }

@font-face {
    font-family: khFont;
    src: url(/fonts/khFont.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
<div class="container">
    <img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
    <div class="hero-text">
        <h1> Welcome to the site </h1>
    </div>
</div>

EDIT 1: Ok so I managed to get different colors that aren’t black and white. But I kind of need those two colors. The colors are also different between browsers. Google Chrome – is in Light Mode and Opera GX – is in Dark Mode. The dark mode one I can’t turn off.

Here’s a screenshot of the website with both browsers.

Opera: webkit stroke is blue and fill is red
Chrome: webkit stroke is blue and fill is red

I (think) I am holding the site locally on my pc, as I only see an IP address at the bar. So I can’t share the site.

Additionally, the code was edited to show in its entirety. This is just for the hero banner, so the HTML will be small, and I did some extra steps for the banner too. If you want to throw in suggestions for that, feel free 🙂

Comments

Comment posted by Christian

Welcome to SO! Can you share more code or a link to your page?

Comment posted by ethry

Please explain “weirdly”, I don’t see the problem?

Comment posted by Wayne Miles

@ethry I mean that no matter what styling or other attributes I use, it is a weird blob on the screen. It works on other browsers as well.

Comment posted by Wayne Miles

@Christian It’s stored locally, but I can share the HTML and CSS code entirely. I’m super new so I don’t know if you can share a website like that. Thank you for the warm welcome!

Comment posted by Wayne Miles

This made the text far more readable thank you!

By