So how can we use this rule? @font-face rule

Answer 1

@font-face {
font-family: Example;
src: url('Example-Roman.otf');
}
@font-face {
font-family: Example;
font-weight: bold;
src: url('Example-Bold.otf');
}
h1{
font-family: Example, sans-serif;
}

Answer 2

This is what i used on my website, its a *.ttf font on the web:
@font-face {
font-family : Ubuntu;
font-style : normal;
font-weight : 300;
src : local('Ubuntu Light'), local('Ubuntu-Light'), url(https://themes.googleusercontent.com/static/fonts/ubuntu/v4/_aijTyevf54tkVDLy-dlnKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

body{
font-family: Ubuntu,Helvetica,Arial,sans-serif;
}
If the Ubuntu-font can't be used it goes to "Helvetica" ,"Arial" and if none is found it uses (buildin OS) "sans-serif"