CODEWITHSUNDEEP
cssfonts
Yan Myo Aung
Yan Myo Aung

Reputation: 398

css import font doesn't work

I have some problem in my p element.

here is my html and css

@font-face {
    font-family: 'Raleway Medium';
    src: url('Raleway-Medium.ttf') format('truetype');
}
.item_txt{
    padding-top : 10px;
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 95px;
    font-size: 21px;
    color : #F9F9F9;
    text-align: left;
    cursor: pointer;
    font-family: 'Raleway Medium' !important;
}

I tried to import custom font but it failed.

<div class="col-sm-7 col-sm-offset-2">

            <div class="item_box">
                <img src="images/boardicon1.png" class='item_img'>
                <p class="item_txt">Mother Board</p>
            </div>
          </div>

ႈhere is project directory.

enter image description here

Upvotes: 0

Views: 4093

Answers (2)

Dinca Adrian
Dinca Adrian

Reputation: 1230

The problem is that it works fine if the computer you are rendering it has the font installed as TrueType font, but if this is on web and the user that renders that page does not have that font installed locally it will fallback to browser default or your default if defined. You need to use a web version of that font, woff or woff2. Using google font will get you back the web version even if you don't ask for it. Search for the woff/woff2 version of the font and us that.

Upvotes: 2

Arjan Knol
Arjan Knol

Reputation: 940

Put this at the top of your style sheet:

@import url('https://fonts.googleapis.com/css?family=Raleway');

Than use this to use the font on certain elements:

p {
   font-family: 'Raleway', sans-serif;
}

Upvotes: 1

Related Questions