I am creating an asp.net website in which I want to set the font of a label.I am trying to do this through CSS.The font that I need to apply is Shivaji05, which would not be available on most systems.This is the CSS:
body
{
}
#font-face {
font-family: "Shivaji05";
src:url("/Shivaji05.eot");
src:url("/Shivaji05.woff")format("woff");
src:url("/Shivaji05.ttf")format("truetype");
font-weight: normal;
font-style: normal;
}
.txtQues
{
font-family: "Shivaji05";
font-size:14px;
background-color:White;
}
The source:
<head>
<link href="../FontSettings.css" rel="stylesheet" type="text/css" />
</head>
<asp:Label ID="lblQuestionText" runat="server" Text="Type Your Question Here"
Font-Bold="True" EnableTheming="False" CssClass="txtQues"></asp:Label>
But this does not work, is there any mistake in this?how should I get this working?Kindly suggest if there are any other alternatives to this approach.
Have a look at below code. In addition; custom font will render in every browser once define the font MIME type as well in config file or in IIS setting.
#font-face {
font-family: 'Shivaji05';
src: url('Shivaji05.eot');
src: url('Shivaji05.eot?#iefix') format('embedded-opentype'),
url('Shivaji05.woff') format('woff'), /* Modern Browsers */
url('Shivaji05.ttf') format('truetype'),
url('Shivaji05.svg#svgFontName') format('svg');
}
Note: All latest browser have support for font type woff.
Update
see attached image. Define MIME Type for font format .woff the MIME type will be application/x-font-woff
Related
all. I've referenced SO often and appreciate the community and expertise. Great site! I'm a noob member, so bear with me.
PROBLEM: embedded files not loaded/displayed
ROOT DIR has two dirs: plugins and project
plugins has files mycss.css and 4 font files (2 woff, 2 ttf)
mycss.css
#font-face {
font-family: 'ALG';
src: url('ALGbvs.woff') format('woff'),
url('ALGbvs.ttf') format('truetype');
}
#font-face {
font-family: 'BVS';
src: url('BitstreamVeraSans.woff') format('woff'),
url('BitstreamVeraSans.ttf') format('truetype');
}
index.html contains (excerpts)
<head>
...
<!-- font-family: ALG and BVS -->
<link href="../plugins/mycss.css" rel="stylesheet" type="text/css" />
...
<style>
body {
font-family: ALG;
background-color: #F9EFE2;
margin: 0;
}
</style>
</head>
I thought I was referencing the css file and the fonts correctly, but they are not loaded/displayed in the body. What am I missing? Thanks for all reads and replies.
First of all use #font-face with more generalize way like,
use this font-face generator tool to generate font-face files for all major browsers Font-Face Generator
#font-face {
font-family: "ALG";
src: url("myfont/ALGbvs.eot");
src: url("myfont/ALGbvs.eot?#iefix") format("embedded-opentype"),
url("myfont/ALGbvs.woff") format("woff"),
url("myfont/ALGbvs.ttf") format("truetype"),
url("myfont/ALGbvs.svg#ALG") format("svg");
font-weight: normal;
font-style: normal;
}
Then check that you are mentioning font file paths correctly, let's assume your folder for all fonts say 'myfont' is in same folder where you have saved your css file.
Then your body tag will be like,
body {
font-family: "ALG";
}
You missed to define source in your css. Add full font url location like this:
#font-face {src: url("../plugins/ALGbvs.ttf");}
I'm using #font-face to try and load a custom font on my website, at least on google chrome.
Still, I'm having a hard time doing so... can anyone help?
<style type="text/css">
#font-face {
font-family: Folks;
url(http://www.vtxfactory.com/Folks-Normal.ttf) format('truetype'),
}
body {
background-color: #000000;
text-align: center;
color: #FFF;
font-family: Folks;
}
</style>
The font name is "Folks" but I'm only using "Folks-Normal" as I don't use the bold version. The font is already allocated on the directed url source.
You can see on http://www.vtxfactory.com/ that when you enter, font-family changes to Times New Roman and don't load my custom font.
Best Regards,
Rui Farinha.
I think you've missed required src property and semicolon at the end:
#font-face {
font-family: Folks;
src: url('http://www.vtxfactory.com/Folks-Normal.ttf') format('truetype'); //<-- semicolon
}
Change the url in the CSS to path
#font-face {
font-family: Folks;
src: url(/path/to/your/font/file/Folks-Normal.ttf) format('truetype'),
}
you can use this service too
http://www.font2web.com/
I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder.
In my XHTML i mentioned the CSS Path,
'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'
AND my CSS file have styles like,
#font-face {
font-family:roboto-bold;
src: url('../fonts/Roboto-Bold.tff') #ttf;
}
.UX_FontClass {
font-family: roboto-bolditalic !important;
font-size : 25px !important;
}
also mentioned XHTML in OutputText as styleClass="UX_FontClass "
Even though font is not working in any browser. What i did wrong with my code? OR Anything i missed out?
You should use google fonts, its really easy to use.
https://www.google.com/fonts#UsePlace:use/Collection:Robot
example
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello World</p>
</body>
You are using custom font so you need to add a few font type format as well; like ttf, eot and svg for iphone, ipad devices.
Note: Some browsers supports different font type that's why you need
ttf,svg or eot.
#font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
Remember after that you need to add this code in class UX_FontClass
.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }
The error is in defining a font named roboto-bold in the #font-face clause, but trying to use a font named roboto-bolditalic later on. That is not the same family!
Solution: make sure the names match.
You probably meant
font-family:'roboto-bold'; font-style:italic;
or, since you're defining the size too, you could use the font shorthand
font:italic 25px 'roboto-bold';
And there's no need for the !important.
Why not use Google fonts?
Place in the header of your html:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
Use in your css:
font-family: 'Roboto', sans-serif;
its really easy to use in css.
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);
Is it possible to define a custom name for Google fonts?
Eg. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
How to use 'Open Sans' with custom name?
div {
font-family: 'custom'; // to be same as 'Open Sans'
}
Using #font-face as answered here is not possible, since I don't have url to source files (ttf, eot, woff, ...).
Links to source files on Google cdn would solve this issue.
This code will work in your case:
<style type="text/css">
#font-face {
font-family: 'MyCustomOpenSans';
font-style: normal;
font-weight: 400;
src:
local('Open Sans'),
local('OpenSans'),
url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),
url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
p {font-family: "MyCustomOpenSans", sans-serif;}
</style>
I'm not sure if it's a stable enough because the URL will change if there's a new update to the font and I'm not sure if Google will ban access to the other URL.
EDIT:
The WOFF format is supported by IE9+, Firefox, Chrome etc.
Source: http://caniuse.com/#feat=woff
The WOFF2 format is less supported:
http://caniuse.com/#search=woff2
You could download the font and supply your own name for it using #font-face {}
Convert the font using a font converter.
Then change the font name like this...
#font-face {
font-family: 'super-wicked-font-yeahhh'; /* CHANGE HERE */
src: url('fontawesome/fontawesome-webfont.eot');
src: url('fontawesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('fontawesome/fontawesome-webfont.svg#svgFontName') format('svg'),
url('fontawesome/fontawesome-webfont.woff') format('woff'),
url('fontawesome/fontawesome-webfont.ttf') format('truetype');
}
Then call the font using:
p {
font-family: super-wicked-font-yeahhh;
}
I'm trying to use a font I installed called "Bebas Neue" from dafont.com on my web page. I am running Ubuntu and I opened the font in font viewer and it successfully installed. Now I have tried referencing the font like so in my CSS:
font-family: 'Bebas Neue', sans-serif;
However this is displaying the default font still. Am I referencing it correctly or do I need to do more to use this font?
Use the #font-face method. http://fontsquirrel.com has a lot of free and free-for-commercial use resources on this. You can upload a font into their generator and it will give you a neat kit with cross-browser font files and instructions.
Here's an example:
#font-face {
font-family: 'OpenSansLight';
src: url('fonts/fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
And then reference this on whatever element you want to apply this to
<style type="text/css">
div {
font-family: OpenSansLight;
}
</style>
<div>
This is OpenSansLight!
</div>
try
#font-face
{
font-family: myFirstFont;
src: url('Bebas Neue.ttf'),
url('Bebas Neue.eot'); /* IE9 */
}
where src is path to the font.
put font into your project folder.
and use that as below,
div
{
font-family: myFirstFont;
}