CODEWITHSUNDEEP
htmlcss
Robust
Robust

Reputation: 83

Font-Family does not change

I have downloaded the Twitch font, which is Twitchy.TV. I'm trying to use it, but when I type the font, it doesn't recognize it.

I think it might be because Twitchy (.) TV. The period is messing it up.

I have tried putting it with "" or ''.

<div class="navigation">
    <div class="left">
        <img src="Logo.png" id="logoImage">
        <h1>TWITCH</h1>
    </div>
</div>

.left h1 { font-size: 22px; color: #fff; font-family: Twitchy.TV; }

Upvotes: 0

Views: 84

Answers (4)

Stefan Morcodeanu
Stefan Morcodeanu

Reputation: 2158

first of all upload you font here https://transfonter.org/ and then you will have generated font prepared and add all your fonts to assets folder and in style.css or style.scss open downloaded folder from transfonter and copy what's inside stylesheets.scss and add to your style.css and then make sure to be correct path to fonts assets/fonts for exameple

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Black.woff2') format('woff2'),
        url('Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

And then in style.css use it, example 

h1 {
    color: red;
    font-family: 'Roboto', sans-serif; //Here you add default font in case the browser 
                                         can't find Roboto font
}

Upvotes: 0

Andr&#233; Ekeberg
Andr&#233; Ekeberg

Reputation: 367

Have you included a @font-face declaration in your CSS?

Nowadays the best format for using fonts on the web is .woff or woff2 files, if you don't have your font in this format there are a lot of web font converters available.

@font-face {
    font-family: 'Twitchy.TV';
    src: url('Twitchy.TV.woff2') format('woff2'),
         url('Twitchy.TV.woff') format('woff')
}

(Assuming you have font files in the same directory as your stylesheet named Twitchy.TV.woff and/or Twitchy.TV.woff2)

If you're just testing the font during development and have it locally installed, you can specify a local installation like this:

@font-face {
    font-family: 'Twitchy.TV';
    src: local('Twitchy.TV');
}

Then you are able to use it like:

.left h1 {
    font-family: 'Twitchy.TV';
}

Upvotes: 2

Nathan Fries
Nathan Fries

Reputation: 1524

You need to import the font at the top of your CSS using @font-face. This allows you to use non-websafe fonts in your website. the src: url can be either a path in the local storage or on an external site.

@font-face {
  font-family: "Twitchy.TV";
  src: url("path/to/font.ttf");
}

You can use the font like this 

.left h1 {
    font-family: "Twitchy.TV";
}

Upvotes: 0

Abishek H
Abishek H

Reputation: 209

Ensure that you have imported the font if it is from an external source!

If you have downloaded the font, make sure that you have added it to the list of font-families in your computer. This can be done in the Control Panel.

Upvotes: 1

Related Questions