CODEWITHSUNDEEP
htmlcss
Rolthar
Rolthar

Reputation: 161

a tag css not working for text in 'a' tag

I am trying to apply the gotham font to my buttons, but nothing seems to be catching, when I inspect the index running and go to the element, it shows font-family as gotham , but the text does not look like gotham. Not sure what I am doing wrong here.

CSS:

@font-face {
    font-family: 'Gotham';
    src: url("assets\fonts\Gotham-Bold.otf") format('embedded-opentype');
    src: url("assets\fonts\Gotham-Light.otf") format('embedded-opentype');
}

a:link, a:visited {
        font-family: Gotham;
        text-align: right;
        color: white;
        background: #005870;
        border: none;
        padding: 15px;
        font-size: 2rem;
        margin-top: 10px;
        cursor: pointer;
        position: absolute;
        right: 65%;
        transition: .4s;
        text-decoration: none;
}


a:hover, a:active {
        font-size: 2.5rem;
        color: #005870;
        background: white;
        transition: .4s;
        text-decoration: none;
}

HTML:

<div id="h1s" style="background:transparent;">
    <img src = "environmental-care.jpg" id="frame"/>

    <div class="h1padding"></div>
    <a class = "h1" href="" id="introID">Intro</a>

    <div class="h1padding"></div>
    <a class = "h1" href=""><b>ON THE</b> <span class="light">SURFACE</span></a>

    <div class="h1padding"></div>
    <a class = "h1" href=""><b>FROM</b> <span class="light">ORE TO OIL</span></a>

    <div class="h1padding"></div>
    <a class = "h1" href=""><b>ENVIRONMENTAL</b> <span class="light">CARE</span></a>

    <div class="h1padding"></div>
    <a class = "h1" href=""><b>MUCH MORE THAN</b> <span class="light">GASOLINE</span></a>

    <div class="h1padding"></div>
    <a class = "h1" href=""><b>ONE MORE</b> <span class="light">THING</span></a>
    <br><br>
    <div class="h1padding"></div>
    <div class="h1padding"></div>
</div>

Upvotes: 0

Views: 343

Answers (1)

Rolthar
Rolthar

Reputation: 161

Solved: Chrome doesnt care about the format, removed that and it is working :)

src: url("assets\fonts\Gotham-Bold.otf") format('embedded-opentype');
src: url("assets\fonts\Gotham-Light.otf") format('embedded-opentype');

changed to:

src: url("assets\fonts\Gotham-Bold.otf");    
src: url("assets\fonts\Gotham-Light.otf");

Upvotes: 1

Related Questions