How do I insert a source in Css?


I was watching an html course and I followed what the teacher was saying at the end of the letter but I can not use an external source. According to the video, it should be done like this:

@font-face {
  font-family: 'MiFuente';
  src: url("fuentes/Back to Black Demo.ttf");
#titulo {
  font-family: 46px 'MiFuente';

And I have done that and I do not get the desired result. I do not know if it's okay what I do or not because I've been trying for a while and the letters I want to be shown remain unchanged.

asked by Vladimir Joel 25.09.2017 в 15:44

4 answers


In the font-family property you can not add the font size, you have to use font or font size ,

Example with font :

#titulo {
  font: 46px 'MiFuente';

Example with font-size :

#titulo {
  font-size : 46px;
answered by 25.09.2017 в 16:17

I put an example of import and use of an external source , within the CSS styles (external document)

@import url(;

html {
    /* para la selección de fuente pongo dos opciones separadas por coma, si la primera no carga, usa la segunda.*/
    font: normal 16px 'Glegoo', serif; 
    font-weight: lighter;
    color: blue;

Another example , loading them within the style declaration of the page itself and storing them with the application, also changing the font family, declaring one of its own:

<title> ... </title>
    @font-face {
        font-family: 'cl-xxx';
        src: url('');
        src: url('')  format('embedded-opentype'),
        url('') format('woff'),
        url('')  format('truetype'),
        url('')  format('svg');

Note that I used an absolute URL, I think I remember that I had problems with the source icons with the relative ones. There are also several types for the source, it happens that each browser reads a type, either woff, ttf ... which forces to put them all, otherwise, even if you load it correctly, it may be that the browser / is that you use do not carry it.

answered by 25.09.2017 в 16:21

In the style you are putting the #Title element, you are using the font-family property, which accepts only the family or generic , but you added the size of the account. I think you confused the font property, which does accept the parameters as you used them.

I leave here the documentation of this property.

CSS font-family

answered by 25.09.2017 в 16:10

You must define the path of your source well, and the source must have the correct format (.ttf).


@ font-face {       font-family: "opensans";       src: url (../../ fonts / OpenSans-Semibold.ttf) format ("truetype"); }


body {       font-family: "opensans"! important; }

I hope you seriva

answered by 25.09.2017 в 16:12