Font not showing properly in HTML page


Tags: html,css,fontfamily

Problem :

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


    CSS Howto..

    How to make diagonal titles on html tables

    How can I apply same style from element that changes in HTML to one that doesn't change in HTML?

    How to retrieve the background image url defined in CSS?

    How do I make cards of different heights fill gap in css? [duplicate]

    How can I change the shape of a gridview to circular?

    how to achieve this this horizontal line from css or bootstrap

    How to Create Responsive Web Page With Static Header?

    CSS Styling - DIV - How to prevent the div element to skip to the next line?

    How to check if element contains specific class attribute

    How to change css by using tag or class name in typescript?

    How to fade-in and fade-out background-image with CSS transition?

    How can i set png icon collection with CSS?

    How to apply text rotation in CSS?

    PHP How to not cache generated HTML but cache static data like images/js/css

    How to make a basic event calendar with javascript, jquery, html and css?

    How do you contain and position an input with a div?

    CSS newbie: How to align my link to the right side of the page?

    How to check if an element has a hover property and do something to another element in css [closed]

    How do I download many of the same pictures fewer times with html, css, jquery, etc.?

    HTML/CSS footer on mobile site doesn't work on IPhone safari How to fix?

    CSS: how to select parent's sibling [duplicate]

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    How to set CSS on body tag to rotate a page using JavaScript

    CSS - How to only apply a style to a div that is inside another div?

    CSS: How do I 'raise' the last photo in this page?

    How To Make iPhone6 Plus Landscape Mode Work Better with Bootstrap3?

    How to make html button look pressed in using css?

    How does a browser determine which cursor to use if multiple are set via CSS?

    How to position div which contains font-awesome icons to centre of another div?

    How to proportionally fit a variable number fieldsets inside a parent div