Font not showing properly in HTML page

Question

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

Please don't add "urgent" or similar to your posts - all questions have equal priority here. Thanks! — halfer, Sep 16 '15 at 14:14
possible duplicate of [Import and use google webfont](http://stackoverflow.com/questions/19161854/import-and-use-google-webfont) — Tofu Warrior, Sep 16 '15 at 14:16

score 4 · Answer 1 · answered Sep 16 '15 at 14:08

4

You need to include the fonts in the site, ether with a link to the css file online

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

Or you would include the fonts into the site using @font-face{}

answered Sep 16 '15 at 14:08

Aaron

10,187
3
23
39

score 4 · Accepted Answer · answered Sep 16 '15 at 14:51

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

score 2 · Answer 3 · answered Sep 16 '15 at 14:09

2

from css-tricks.com

How to host and embed font files using css

<style>
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
</style>

answered Sep 16 '15 at 14:09

andrew

9,313
7
30
61

2

Additional to the answer of @andrew: If you only have the ttf file extension you could generate all the fonts here: [font-squirrel](http://www.fontsquirrel.com/tools/webfont-generator) – Rotan075 Sep 16 '15 at 14:11
This requires you to have the actual font files in your site root. – Sumner Evans Sep 16 '15 at 14:13

score 0 · Answer 4 · edited May 23 '17 at 12:07

0

You need to provide them a way to download the font.

Put @import url('http://fonts.googleapis.com/css?family=Open+Sans') at the top of your css. This was covered in this question by another user.

edited May 23 '17 at 12:07

Community

1
1

answered Sep 16 '15 at 14:10

Tofu Warrior

386
3
10

Font not showing properly in HTML page

4 Answers4

Linked