How do I insert a source in Css?

4

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
source

4 answers

3

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-family:'MiFuente';
  font-size : 46px;
}
    
answered by 25.09.2017 в 16:17
2

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

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

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>
<style>
    @font-face {
        font-family: 'cl-xxx';
        src: url('http://www.cambialibros.es/public/fonts/cl.eot');
        src: url('http://www.cambialibros.es/public/fonts/cl.eot')  format('embedded-opentype'),
        url('http://www.cambialibros.es/public/fonts/cl.woff') format('woff'),
        url('http://www.cambialibros.es/public/fonts/cl.ttf')  format('truetype'),
        url('http://www.cambialibros.es/public/fonts/cl.svg')  format('svg');
    }
</style>

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
1

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
1

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