CODEWITHSUNDEEP
htmlcss
Aditya Dev
Aditya Dev

Reputation: 149

custom font on text inside a div

I have a custom font which I need to use inside

project/assets/fonts/font.ttf

The css file is inside

project/css/style.css

The html snippet is:

<div class="text"> title </div>

The css part is:

.text{
width: 33.3%;
float:left;
font-family:font;
src: url('../assets/fonts/font.ttf');}

But this is not working. That is, the text is being displayed with default font. Whats wrong here?

Upvotes: 3

Views: 3695

Answers (3)

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You first need to import this font inside your CSS using @font-face, like:

@font-face {
  font-family: MyFont;
  src: url('myfont.ttf');
}

And then use it as a font in your elements, like:

.text{
  width: 33.3%;
  float: left;
  font-family: MyFont;
}

Hope this helps!

Upvotes: 0

Tyler Roper
Tyler Roper

Reputation: 21672

First off, you may want to consider using one of the many .ttf to .woffconverters online, as .woff is a more web-friendly format.

Second, you'll need to declare the font before you start using it. That can be done in CSS like so:

@font-face {
    font-family: myFont;
    src: url('../assets/fonts/font.ttf');
}

.text {
    width: 33.3%;
    float:left;
    font-family: myFont;
}

Regarding the .woff suggestion:

WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

Source: w3schools - CSS3 Web Fonts

Upvotes: 5

Jacob G
Jacob G

Reputation: 14172

You're including the font the wrong way, use @fontface:

@font-face {
  font-family: testFont;
  src: url('../assets/fonts/font.ttf');
}

Then just use the font like you would any other:

.text{
  width: 33.3%;
  float:left;
  font-family: testFont;
}

Upvotes: 0

Related Questions