How to change malayalam unicode fonts style - html

i was tying to add a new malayalam unicode font to web page.
<style type="text/css">
#font-face {
font-family: "Meera";
src: url(Meera.ttf) format("truetype");
}
p{
font-family: "Meera";
}
</style>
<p>മലയാളം</p>
have Meera.ttf and this is my CSS code
but font doest changed it still displays the text in default font of the browser (Nirmala UI)
Is there any error in my code?
Thanks in advance

<style type="text/css">
#font-face {
font-family: "Meera";
src: url(Meera.ttf) format("truetype");
}
p{
font-family: "Meera";
}
</style>
<p>മലയാളം</p>

Related

custom font not importing

none of the font CSS import seems to work...
I thought maybe it was because I wasn't using xampp, but it doesn't seem to matter... still doesn't work, I don't understand.
<style>
#font-face{
font-family: "ogrejuice";
src: url('ogrejuice.ttf'),
url('ogrejuice.eot'); /* IE */
}
</style>
attempt 2
<style>
#font-face{
<!-- font-family: "ogrejuice"; -->
src: url('ogrejuice.woff2'),
src: local('ogrejuice.woff2'),
<!-- url('ogrejuice.eot'); /* IE */ -->
}
</style>
attempt 3
<style>
#font-face{
<!-- font-family: "ogrejuice"; -->
src: url('ogrejuice.woff2'),
src: local('ogrejuice.woff2'),
<!-- url('ogrejuice.eot'); /* IE */ -->
}
#font-face {
font-family: "ogrejuice";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../ogrejuice.eot");
src: url("../ogrejuice.eot?#iefix") format("ie9-skip-eot"),
url("../ogrejuice.woff2") format("woff2"),
url("..ogrejuice.woff") format("woff");
}
</style>
attempt 4
<style>
#font-face {
font-family: myFirstFont;
src: url(ogrejuice.woff);
}
</style>
ok so. For all first time custom font users out there... when you set the font.. That doesn't mean your page will use it... Consider the fallowing
<style>
#font-face {
font-family: myFirstFont;
src: url(aesymatt.ttf);
}
body{
font-family: myFirstFont;
}
</style>
The above code works fine for me. Somehow, setting the font-face doesn't actually do anything except make the font available, I guess? Definitely would not have thought of that. I don't normally use the # symbol in the CSS of my projects except for specific cases like break points, so I haven't paid any attention to it until now.

#font-face and #font-family not working

I am trying to make something really simple: add 3 fonts to an html page.
I have looked at tons of examples but none have solved my problem. Maybe I am lacking something in the way it is written. I am actually not sure.
My html:
<html>
<head>
<title>Fuentes</title>
<link type="text/css" rel="stylesheet" href="Fuentes.css">
</head>
<body>
<p class="a">This is a paragraph, shown in Roboto font.</p>
<p class="b">This is a paragraph, shown in Bellefair font.</p>
<p class="c">This is a paragraph, shown in the Kavivanar font.</p>
</body>
</html>
And my .css:
#font-face {
font-family: "Roboto";
src: url(https://fonts.google.com/specimen/Roboto) format("truetype");
}
#font-face {
font-family: "Bellefair";
src: url(https://fonts.google.com/specimen/Bellefair) format("truetype");
}
#font-face {
font-family: "Kavivanar";
src: url(https://fonts.google.com/specimen/Kavivanar) format("truetype");
}
p.a {
font-family: "Roboto", Roboto, sans-serif;
}
p.b {
font-family: "Bellefair", Bellefair, sans-serif;
}
p.c{
font-family: "Kavivanar", Kavivanar, sans-serif;
}
That's definitely not how to use Google fonts... You're not even linking to an actual font, you're linking to the support page.
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
First go to the page: https://fonts.google.com/specimen/Roboto
Then click this:
Then it will create a little box in the corner. Click that box, and you will see this. Now you have the actual code:
You should add stylesheet link in your html for each google font you want to use. eg
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
for roboto font in your html and then use font-family: 'Roboto', sans-serif;in your css.

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

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;
}
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

I cannot embed a font in html page using #font-face rule

i have tried adding a font to my webpage using #font-face rule but its not showing
HTML
<!-- language: lang-html -->
<ul>
<li>GREAT</li>
<li>BITE</li>
</ul>
CSS
<!-- language: lang-css -->
body{
font-family:Armata;
font-size:16px;
color:orange;
text-align: center;
background:white;
}
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
you can download the font from here : http://www.moldire.com
You need to put font-face in top of CSS.
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
body{
font-family:Armata;
font-size:16px;
color:orange;
text-align: center;
background:white;
}
#font-face {
font-family: 'Armata';
src: url(Armata-Regular.ttf),
src: url(Armata-Regular.otf),
src: url(Armata-Regular.eot);
}
li
{
font-family:Armata;
}
or if u want to use it for full page then apply it to body tag
Here are my steps to have the font working:
Font face first in css (already mentioned)
Have the type/format of font - EX: src: url(Armata-Regular.ttf) format('truetype')
Make sure your host (local or not) has the MIME type for these fonts
Lastly, would you consider a web font path? Save yourself time by getting a web path embedded font: http://www.google.com/fonts/specimen/Armata
Doing this will save you time skipping last bullet.
Use this on your website
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
and in CSS you will need this :
font-family: 'Armata', sans-serif;

CSS stylesheet and custom fonts

Alright, I'm a CSS newbie so here we go. In a template I'm using there's a stylesheet
head {font-family:Verdana; font-size:16px; color:#000000;}
body
{font-family:Verdana; font-size:12px; color:#ffffff}
a
{color:#ff0000; font-family:Verdana; font-size:30px;}
bluetext
{color:#0000ff;}
tooltip{font-family:Verdana; font-size:11px;
color:#ffffff;}
So I figure it's determining what the font should be for each of these sections. What do I do if I want to use a custom font instead of Verdana for all of these sections? I have the .ttf file, but I don't know what else to do.
Thanks in advance!
First generate font for all browser like woff for Mozilla, eot for IE etc. So, you can generate from http://www.fontsquirrel.com/fontface/generator & http://www.font2web.com/ .
Then write #font-face in your CSS.
#font-face {
font-family: 'font';
src: url('font.eot?') format('eot'), url('font.woff') format('woff'), url('font.ttf') format('truetype');
}
body{
font-family: 'font';
color:#fff;
font-size:12px;
}
.head {font-size:16px; color:#000000;}
a {color:#ff0000; font-size:30px;}
.bluetext {color:#0000ff;}
.tooltip{font-size:11px;}
You need to use font-face for that. The basic implementation is:
#font-face {
font-family: CustomFontName;
src: url(http://path-to/customfont.ttf);
font-weight:400;
}
Then just use it like any other font in any other style rule.
p {
font-family: CustomFontName, Helvetica, Arial, sans-serif;
}
You must use this into your css file :
#font-face {
font-family: your_font;
src: url('your_font.ttf');
}
In order to work on IE, you should export another version of your font with .eot extension, and add another src property.
Edit:
Here is an usefull link about using #font-face : http://www.webistrate.com/css3-custom-fonts-using-font-face/
Just first install this font on your server/system/root.
& then apply like this in your css
#font-face {
font-family: 'myriadproregular'(i.e.custom font name);
src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
}
and if you want more than one font you can do the same
#font-face {
font-family: 'myriadprocond';
src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
}
#font-face {
font-family: 'myriadprosemibold';
src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
}
just use the font name where ever you want to use
such as
p
{
font-family:"custom font name"
}