I have a custom font .ttf and and .otf file that I have added to my font folder in my mvc project. How do I call these from CSS? Seen some articles talk about opening font managers or html designer but I can't see anything to embed these so they work on all browsers?
Thanks
You have already added your custom font to the fonts folder in Visual Studio.
Now all you have to do is point to your font in the #font-face rule:
#font-face {
font-family: "MyCustomFont.ttf";
font-style: normal;
src: url(../fonts/MyCustomFont.ttf); /*if IE */
src: local("MyCustomFont"), url("../fonts/MyCustomFont.ttf") format("truetype"); /* non-IE */
}
If you need another font, just add another #font-face rule
#font-face {
font-family: "MyCustomFont2.otf";
font-style: normal;
src: url(../fonts/MyCustomFont2.otf); /*if IE */
src: local("MyCustomFont2"), url("../fonts/MyCustomFont2.otf") format("truetype"); /* non-IE */
}
This approach should work for all browsers.
Source:
https://forums.asp.net/t/1589195.aspx?Adding+a+font+to+use+in+visual+studio
Related
I'm trying to get a font working from local storage.
#font-face {
font-family: const;
src: url(const.ttf);
}
.fp_title1 {
font-family: 'const', trebuchet ms;
font-size: 350%;
font-weight: 100;
-webkit-text-stroke: 1px;
}
This won't work. I've tried renaming the file, using the 'font-family' with and without quotes...
I've also tried to link the font with HTML
<link href='CSS/const.ttf' rel='stylesheet' type='text/css'>
It's in the same folder, the name is right. I don't get it.
EDIT: My CSS file is already linked, the font is .ttf
You might have 2 mistakes in code: path and extention. And use the following formats as well as ttf:
#font-face {
font-family: 'const';
src: url('const.eot'); /* IE9 Compat Modes */
src: url('const.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('const.woff') format('woff'), /* Modern Browsers */
url('const.ttf') format('truetype'), /* Safari, Android, iOS */
url('const.svg#svgFontName') format('svg'); /* Legacy iOS */
}
urls that helps to create web fonts:
http://www.fontsquirrel.com/tools/webfont-generator
http://www.font-face-generator.com/
CSS has a .css filename extension, you gave it .ttf
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;
}
I am using font-family "angelina". Its working properly on local server. But its not working on live server. It also working on live server just only on my computer. But its not working on any other computers.
I check it in all browsers on other computers but its not working.
I am using CSS code like this
#font-face {
font-family: MyCustomFont;
src: url("ANGELINA.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("ANGELINA.TTF") /* TTF file for CSS3 browsers */
}
.test_font{
font-family: angelina;
font-size: 36px;
font-weight: bold;
}
You need to have all kinds of font extensions on server to support all browsers.
#font-face {
font-family: MyCustomFont;
src: url('ANGELINA.eot');
src: url('ANGELINA.eot?') format('☺'),
url('ANGELINA.woff') format('woff'),
url('ANGELINA.ttf') format('truetype'),
url('ANGELINA.svg#webfontssbCkuz5') format('svg');
}
You can find all font extensions on this site http://www.google.com/webfonts
It supposed to be:
#font-face {
font-family: angelina;
src: url("ANGELINA.eot") /* EOT file for IE */
}
#font-face {
font-family: angelina;
src: url("ANGELINA.TTF") /* TTF file for CSS3 browsers */
}
if you want to call font-family: angelina;
Anyone come across with this issue?
Windows 7 Chrome web font OTF issue:
I have a web font and adding it with css3...Looks great in FF/IE(or takes the backup)/Safari but in Chrome(Windows) it looks pretty awful:
I tried this: -webkit-font-smoothing: antialiased;
...Which fixes it in Safari but not Chrome and saw here that Mac should work:
Does -webkit-font-smoothing only work on Mac browsers, Not windows?
I checked this too: http://maxvoltar.com/archive/-webkit-font-smoothing
Here is what i have:
#font-face { font-family: SeravekBasic; src: url('/fonts/SeravekBasic-Regular.otf'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased;}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}
html, button, input, select, textarea {font-family: SeravekBasic, Arial, Helvetica, sans-serif; color: #000; }
Lastly I tried Mozillas text-rendering see if this would help webkit but nothing:
https://developer.mozilla.org/en-US/docs/CSS/text-rendering
....Not sure if there is something else that can resolve this.
I wouldn't recommend using OTF for webfonts. It causes some rendering issues for people using Windows XP. You're going to have to use a bulletproof font-face syntax with a media query specifying SVG for chrome.
An example for PT Sans
#font-face {
font-family: "PT Sans";
src: url("ptsans.eot");
src: url("ptsans.eot?#iefix") format("embedded-opentype"),
url("ptsans.woff") format("woff"),
url("ptsans.ttf") format("truetype"),
url("ptsans.svg") format("svg");
font-weight: normal;
font-style: normal
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: "PT Sans";
src: url("ptsans.svg") format("svg")
}
}
Chrome uses an older font rendering system, so it doesn't show fonts as clearly. Chrome fonts look best with SVG so you have to specify a media query to serve only Chrome the SVG file. You can find more information on the syntax here: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax.
You should include ttf, eot, woff, and svg formats in your #font-face syntax. The browser won't download each one, it will only download the one it needs. It also adds appropriate fallback. This should solve most of your font rendering issues.You can get the appropriate files for your #font-face rule by using the fontsquirrel generator: http://www.fontsquirrel.com/tools/webfont-generator.
So my solution was to convert this to embedded Open Type:
.eot and also add .woff for other browser support.
This is actually great because it works fine in IE9 (even IE8)
:)
src: url('/fonts/SeravekBasic-Regular.eot');
src: url('/fonts/SeravekBasic-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/SeravekBasic-Regular.woff') format('woff');
I'm using #font-face on a website. The code works and in Firefox, Chrome, and Opera the #font-face font loads perfectly. The code used is the same that's generated by Font Squirrel. This is the #font-face code:
#font-face {
font-family: 'OpenSansRegular';
src: url('fonts/OpenSans-Regular-webfont.eot');
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
And the font is then called using this code:
font-family: "OpenSansRegular",Arial,sans-serif;
However, in IE9 it still works but is very clunky. When the page is loaded initially, the Arial font is loaded first, and after about 1 or 2 seconds the OpenSansRegular font is then loaded. This obviously spoils the experience of the site as the page is loaded with one font then the other font is booted on to the page after a period of time.
Is there a way to prevent this from happening while still using #font-face?
In IE 9, the use of data: attribute is fully supported. In this case, you can modify the CSS this way:
#font-face {
font-family: 'OpenSansRegular';
src: url('data:font/eot;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAggg=='); /* IE 9 */
font-weight: normal;
font-style: normal;
}
This will make sure only when the CSS completely loads, it loads the fonts too. Hope it helps.