Search code examples
cssfontsfont-facewebfonts

How to use not common fonts in a website?

I have seen some pages using "weird" fonts.

One of them, is called MuseoSlab500Regular. How can i do in order use it at my styles?

Do i need to load the font from somewhere to be rendered in all the clients without problems?

I have been looking at the code of this website to figure it out but i couldn't find frmo where they load the MuseoSlab500Regular font:

http://theme-fusion.com/avada/

Regards

Solution

  • They're using @font-face to load that font.

    Look at this css file:

    http://theme-fusion.com/avada/wp-content/themes/Avada/css/all.css

    At the top you'll see the css code being used:

    @font-face {
font-family: 'MuseoSlab500Regular';
src: url('../fonts/Museo_Slab_500-webfont.eot');
src: url('../fonts/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Museo_Slab_500-webfont.woff') format('woff'),
    url('../fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
    url('../fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format('svg');
font-weight: normal;
font-style: normal;
}