how to add a font in aspx page (css) - css

i have to add a regional language content on the site but the output shows as
²æà PÀApÃgÀªÀ ¸ÀÄÖrAiÉÆà ¤AiÀÄ«ÄvÀ,
where as i have imported the font in the css like this
#font-face {font-family: 'CoreIconsRegular';
src: url('fonts/coreicons-webfont.eot');
src: url('fonts/coreicons-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coreicons-webfont.woff') format('woff'),
url('fonts/coreicons-webfont.ttf') format('truetype'),
url('fonts/coreicons-webfont.svg#coreiconsregular') format('svg');
font-family: "akshar";
src: url(/akshar.eot); /* IE */
src: local("The Real Font Name"),
url(/akshar.ttf) format("truetype"); /* non-IE */
font-weight: normal;
font-style: normal;
}
* {
font-family: "akshar", Arial, Helvetica, sans-serif;
font-weight:400;
}
please help???


You have the Declaration syntax error in your CSS. Update your CSS like below.
#font-face {
font-family: 'CoreIconsRegular';
src: url('fonts/coreicons-webfont.eot');
src: url('fonts/coreicons-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coreicons-webfont.woff') format('woff'),
url('fonts/coreicons-webfont.ttf') format('truetype'),
url('fonts/coreicons-webfont.svg#coreiconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "akshar";
src: url(/akshar.eot); /* IE */
src: local("The Real Font Name"),
url(/akshar.ttf) format("truetype"); /* non-IE */
font-weight: normal;
font-style: normal;
}

Related

Why custom fonts on my websites does not work

It works before I add support for .ttf, .eot and .svg, but now, it doesn't work anymore.
CSS:
#charset "UTF-8";
#font-face {
font-family: 'qianxsnjgregular';
src: url('./font/zh/qxsn-webfont.eot');
src: url('./font/zh/qxsn-webfont.eot?#iefix') format('embedded-opentype'),
url('./font/zh/qxsn-webfont.woff2') format('woff2'),
url('./font/zh/qxsn-webfont.woff') format('woff'),
url('./font/zh/qxsn-webfont.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'qianxsnjgregular', SimHei, sans-serif;
font-weight:normal;
font-style:normal;
}

custom font url in codeigniter

Hy,
I have a little problem.
I put the font in assets/fonts/barcode.ttf
I use the next code
#font-face {
font-family: "barcode font";
src: url(assets/fonts/barcode.ttf) format("truetype");
src: url(assets/fonts/barcode.svg) format('svg');
src: url(assets/fonts/barcode.eot);
src: url(assets/fonts/barcode.woff);
src: url(assets/fonts/barcode.woff2);
}
.classname {
font-family: 'barcode font';
}
p.codbare {
font-family: 'barcode font';
font-weight: normal;
font-style: normal;
font-size: 80px;
}
but is not working. Is not showing the font when I add a text.

Font doesn't display correctly on Safari

I have a displaying problem with the font on Safari. The font looks slitly thicker on some pages than others. I load only normal font-weight in the whole website (no bold), using #font-face.
Firefox and Chrome seem to display the font the same thickness on every pages.
Here is my code:
#font-face {
font-family: 'Stanley';
src: url('Stanley-RegularItalic.eot');
src: url('Stanley-RegularItalic.eot?#iefix') format('embedded-opentype'),
url('Stanley-RegularItalic.woff2') format('woff2'),
url('Stanley-RegularItalic.woff') format('woff'),
url('Stanley-RegularItalic.ttf') format('truetype'),
url('Stanley-RegularItalic.svg#Stanley-RegularItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Stanley';
src: url('Stanley-Regular.eot');
src: url('Stanley-Regular.eot?#iefix') format('embedded-opentype'),
url('Stanley-Regular.woff2') format('woff2'),
url('Stanley-Regular.woff') format('woff'),
url('Stanley-Regular.ttf') format('truetype'),
url('Stanley-Regular.svg#Stanley-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
See screenshot of two different pages:

Give a try, add this to your font-face
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

font-face does not work locally

I have been using #font-face for a while now and have not had any issues when viewing my files online. But #font-face has never worked locally.
I don't understand why I cannot get #font-face to work locally. I am using Visual Studio 2012 Ultimate for my dev.
CSS:
/* Include Fonts */
#font-face {
font-family: 'SansationRegular';
src: url('/Shared/Assets/Fonts/Sansation_Regular-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Regular-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Regular-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationLight';
src: url('/Shared/Assets/Fonts/Sansation_Light-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Light-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Light-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Light-webfont.svg#SansationLight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationBold';
src: url('/Shared/Assets/Fonts/Sansation_Bold-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Bold-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Bold-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Bold-webfont.svg#SansationBold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationLightLightItalic';
src: url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Light_Italic-webfont.svg#SansationLightLightItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationItalic';
src: url('/Shared/Assets/Fonts/Sansation_Italic-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Italic-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Italic-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Italic-webfont.svg#SansationItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationBoldItalic';
src: url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.eot');
src: url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.woff') format('woff'),
url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.ttf') format('truetype'),
url('/Shared/Assets/Fonts/Sansation_Bold_Italic-webfont.svg#SansationBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
/* Set Fonts */
a, p, li, text, label, input, submit, textarea/* DEPRECATED:, #PositionPayRange*/ {
font-family: 'SansationLight';
}
h1, h2, h3, h4, h5, h6, .PositionPayRange {
font-family: 'SansationBold';
}
/* Font sizing */
a, p, li, label {
font-size: small;
}
/* Set Font Colors */
a, p, li, text, label, input {
color: #111111;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
Can someone please explain why it works perfectly fine on the server, but never locally?
It does not matter which browser, or which version of a browser I use. Same results.
Edit:
My directory structure is:
root/
Shared/
Assets/
Fonts/
*fonts are in here.*
CSS/
* css files are in here. *
Home.cshtml

This should work for your current directory structure.
#font-face {
font-family: 'SansationRegular';
src: url('../Fonts/Sansation_Regular-webfont.eot');
src: url('../Fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Regular-webfont.woff') format('woff'),
url('../Fonts/Sansation_Regular-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationLight';
src: url('../Fonts/Sansation_Light-webfont.eot');
src: url('../Fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Light-webfont.woff') format('woff'),
url('../Fonts/Sansation_Light-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Light-webfont.svg#SansationLight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationBold';
src: url('../Fonts/Sansation_Bold-webfont.eot');
src: url('../Fonts/Sansation_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Bold-webfont.woff') format('woff'),
url('../Fonts/Sansation_Bold-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Bold-webfont.svg#SansationBold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationLightLightItalic';
src: url('../Fonts/Sansation_Light_Italic-webfont.eot');
src: url('../Fonts/Sansation_Light_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Light_Italic-webfont.woff') format('woff'),
url('../Fonts/Sansation_Light_Italic-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Light_Italic-webfont.svg#SansationLightLightItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationItalic';
src: url('../Fonts/Sansation_Italic-webfont.eot');
src: url('../Fonts/Sansation_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Italic-webfont.woff') format('woff'),
url('../Fonts/Sansation_Italic-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Italic-webfont.svg#SansationItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'SansationBoldItalic';
src: url('../Fonts/Sansation_Bold_Italic-webfont.eot');
src: url('../Fonts/Sansation_Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/Sansation_Bold_Italic-webfont.woff') format('woff'),
url('../Fonts/Sansation_Bold_Italic-webfont.ttf') format('truetype'),
url('../Fonts/Sansation_Bold_Italic-webfont.svg#SansationBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}

Try path like this
src: url('../Shared/Assets/Fonts/Sansation_Regular-webfont.eot');

Icon-font not visible in firefox

I have added with #fontface an iconfont. The only problem is, that it is not visible under firefox. I have the newest version of firefox. Safari and Chrome are working perfectly fine.
#font-face {
font-family: 'iconFont';
src: url('../fonts/iconFont.eot');
src: url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconFont.svg#iconFont') format('svg'), url('../fonts/iconFont.woff') format('woff'), url('/fonts/iconFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

#font-face {
font-family: 'iconFont';
src: url('../fonts/iconFont.eot');
src: url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconFont.woff') format('woff'),
url('../fonts/iconFont.ttf') format('truetype'),
url('../fonts/iconFont.svg#iconFont') format('svg');
font-weight: normal;
font-style: normal;
}
For font-face kit generations you can use:
http://www.fontsquirrel.com/fontface/generator
http://fontface.codeandmore.com/index.php

Try this:
#font-face {
font-family: 'iconFont';
src: url('../fonts/iconFont.eot');
src: url('../fonts/iconFont.eot') format('embedded-opentype'), url('../fonts/iconFont.svg') format('svg'), url('../fonts/iconFont.woff') format('woff'), url('/fonts/iconFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
avoid the shorthand font format
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}

Resources