Styling a CSS font face to have two custom fonts on a html page

Question

I have a web page that successfully uses one of the two font-faces I have here. I want the user to be able to see a top menu div tag that is styled with the Cubano font while the rest of the text of the page will be open sans. @font-face seems to be just unique so I cant add two font-familys to it.

EDIT: Demo can be seen here on the rate1.html page.

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

@font-face {
font-family: 'Cubano';
src: url("fonts/cubano-webfont.ttf") format('truetype');
font-weight: normal;
font-style: normal
}


body {
font: 32px/40px 'OpenSans', sans-serif;
color: #777;
}

body div.recent {
font: 32px/40px 'Cubano', sans-serif;
color: #777999;
}

Answer 1

For the Open Sans you can use @import (in .css file):

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

or link it in the <head> :

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

See more options here

Styling a CSS font face to have two custom fonts on a html page

Question

1 answers

solution1
1 2016-03-30 15:37:34

Styling a CSS font face to have two custom fonts on a html page

Question

1 answers

solution1 1 2016-03-30 15:37:34

solution1
1 2016-03-30 15:37:34