Search code examples
htmlcssfont-family

Font not showing properly in HTML page


I'm using two font family, 1. "Open sans" 2. Colvetica . I'm facing this kind of problem with these fonts.

1) I use open sans like this " font-family: 'Open Sans'; " in CSS file. It works only those computer who has open sans installed. But in mobile this is not working at all.

2) For colvetica, I used that but not working. I don't know how to to use that. I use colvetica font file but same issue. How to use this font ?

I need opensans and colvetica in same page . like colvetica for , and opensans for


Solution

  • You need to import by Google fonts or with @font-face.

    In Google fonts you can use import by HTML or CSS:

    On your HTML:

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

    On your CSS:

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

    If you can't find you font on google.com/fonts, you can create your own font face kit: http://www.fontsquirrel.com/tools/webfont-generator (you can generate everything, including the css code to embed font), so not all fonts can be converted. See the path to make it in the correct url