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.