How to integrate font in my web?

Question

How to integrate font in my web?

Navigation

#1 by (3 votes)

1

I have the following fonts :

Rubik-Bold.ttf
Rubik-MediumItalic.ttf
Rubik-Black.ttf

I want to use these fonts for example in each one:

<p class="bold">Hola</p>
<p class="medium">Hola</p>
<p class="black">Hola</p>

I guess I'll have to do something like this in my app.css

@font-face { */
  font-family: 'Rubik-Bold.ttf'; 
}

and that file .ttf have it at the same height as my app.css , but let's imagine that I have 30 files .ttf in a folder,

Is there any way to import them easier?

css font-faces

asked by sirdaiz 29.01.2018 в 12:41

source

1 answer

How to make a LIKE in Linq? Help with my css code

score 3 · Answer 1

Hello, really, not if you rely on the example:

<p class="bold">Hola</p>
<p class="medium">Hola</p>
<p class="black">Hola</p>

you could only define the source for each class and you're done:

.bold {
  font-family: url('Rubik-Bold.ttf'); 
}

Now if you want to use @font-face , you can do it in the following way:

@font-face { 
    font-family: 'Rubik'; 
    src: url('Rubik-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face { 
    font-family: 'Rubik'; 
    src: url('Rubik-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face { 
    font-family: 'Rubik'; 
    src: url('Rubik-Black.ttf');
    font-weight: 300;
    font-style: normal;
}


.bold, .medium, .black {
    font-family: 'Rubik';
}

.bold {
    font-weight: bold;
}

.medium {
    font-weight: 500;
}

.black {
    font-weight: 300;
}

Topic of files, you can have them in relative routes and use path

/css
    style.css
/fonts
    /Rubik
        Rubik-Black.ttf

For example to use Rubik-Black.ttf in style.css would do the following

@font-face {
    font-family: 'Rubik',
    src: url('../fonts/Rubik/Rubik-Black.ttf');
}

Anyway, if you can better use a CDN to store your static files as sources.