I have understood the concept of globalization and also applied to the demo code but now i want to create the marathi web site for that how can i get marathi language in the .resx file( which font help to write in to the marathi language) in to the asp.net
use the #font-face and keep the marathi.ttf inside the folder where you define css file
CSS
#font-face {
font-family: 'MarathiFont';
src: url('marathi.eot'); /* IE9 Compat Modes */
src: url('marathi.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('marathi.woff') format('woff'), /* Modern Browsers */
url('marathi.ttf') format('truetype'), /* Safari, Android, iOS */
url('marathi.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MarathiFont', Arial, sans-serif;
}
Related
This question already has answers here:
How to add some non-standard font to a website?
(21 answers)
Closed 5 years ago.
I found the most beautiful font here. I want to use it. I tried following:
#font-face {
font-family: myFirstFont;
src: url(http://fontsforweb.com/font/show/?id=78041);
}
div {
font-family: myFirstFont;
}
(Source: https://www.w3schools.com/css/css3_fonts.asp)
That is not source for font its just website where you can download it. Download font and place in folder fonts then change your code src to that path.
Download the full zip file, Extract it then put it in your project then use this code:
#font-face {
font-family: myFirstFont;
src: url(MonsieurPomme.woff);
}
div {
font-family: myFirstFont;
}
You need to download the font files and add links to the various formats, depending on which browsers you want to support:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
See https://css-tricks.com/snippets/css/using-font-face/ for more info.
Using font-face.
#font-face{
font-family: ((fontName));
src: url(fontname.woff);
}
Then you can call it just as how you call other fonts.
You need to directly link to the font file instead of just the webpage.
#font-face {
font-family: myFont;
src: url('font.eot'); /* IE9 Compatible Modes */
src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font.woff2') format('woff2'), /* Super Modern Browsers */
url('font.woff') format('woff'), /* Pretty Modern Browsers */
url('font.ttf') format('truetype'), /* Safari, Android, iOS */
url('font.svg#svgFontName') format('svg'); /* Legacy iOS */
}
div {
font-family: 'myFont', serif;
}
I downloaded a font and in my CSS I have :
#font-face {
font-family: "Gotham Medium";
src: url("Gotham/Gotham-Medium.otf");}
When I call say in
h1 { font-family:'Gotham Medium'}
the font display does not match what Gotham should look like. Nor is it a default font.
Is the problem a matter of something being changed when downloaded in my laptop ?
The font is not in the google API so I can't try with an external link.
Your Css should be like this :
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
css Trick
To do this you can use a generator for font-face but you must have the license for the web font
On a website that I'm developing I am able to import and display via #font-face my custom font.
It works perfectly on different browsers
In the specific what I did was:
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'); /* IE9 Compat Modes */
src: url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('assets/fonts/MyCustomFont.woff') format('woff'); /* Pretty Modern Browsers */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
The problem is that when I try to import the .ttf and .svg formats the font is not displayed anymore and the Fallback font will be applied.
This is how I imported .svg and .ttf
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'); /* IE9 Compat Modes */
src: url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('assets/fonts/MyCustomFont.woff') format('woff'); /* Pretty Modern Browsers */
src: url('assets/fonts/MyCustomFont.ttf') format('truetype'); /* Safari, Android, iOS */
src: url('assets/fonts/MyCustomFont.svg#svgMyCustomFont') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
How come is this happening?
Is possible to fix it?
Thanks in advance
Put a comma at the end of each line instead of a ";" and only define the source once.
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'), /* IE9 Compat Modes */
url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/MyCustomFont.woff') format('woff'), /* Pretty Modern Browsers */
url('assets/fonts/MyCustomFont.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/MyCustomFont.svg#svgMyCustomFont') format('svg'); /* Legacy iOS */
}
I am developing an Angular application that shows content from a certain custom font file if the user goes offline at any point. The font file is referenced in a CSS file.
The trouble is that the custom font file is not downloaded till it comes time to display the content about the fact that the user is offline, but at that point the user is already offline and the font file obviously cannot be downloaded. The relevant CSS section is below.
Any hints on if there is a way to download the font files before hand?
#font-face {
font-family: 'someFamily';
src: url('fonts/someFamilyIcons.eot'),
url('fonts/someFamily.ttf') format('truetype'),
url('fonts/someFamily.woff') format('woff'),
url('fonts/someFamily.svg') format('svg');
font-weight: normal;
font-style: normal;
}
You can use a file to base64 encoder and load your font that way.
This could potentially help.
Once you have a base64 string, you can load it onto your site like so:
#font-face {
font-family: 'someFamily';
src: url('fonts/someFamilyIcons.eot'),
src: url(data:application/x-font-woff;charset=utf-8;base64,THE_BASE64_STRING) format('woff');
font-weight: normal;
font-style: normal;
}
#font-face { font-. family:'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('webfont.woff2') format('woff2'),
/* Super Modern Browsers */ url('webfont.woff') format('woff'),
/* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'),
/* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */ }`
I would also suggest this line of code for further support with different browser because some browsers may not support your fonts or if the font site is down you won't have to worry about the change of fonts later
body { font-family: 'MyWebFont', Fallback, sans-serif; }
Here is a link for reference:
CSS tricks font reference
i am going to print one student certificate . but according to customer requirement they want "wedding text". can i use wedding text for my font ? how to use it in css ?
I have downloaded one package and used it in text editor .
<p style="font-family:'A Dark Wedding';">Akila H Joshef </p>
Step 1:
Convert you font to the uni format here.
Step 2:
Upload your new fonts to the folder of your web.
Step 3:
Use CSS #font-face. Manual here.
Step 4:
Use CSS font-family: 'MyNewWeddingFont';.
Try this
#font-face {
font-family: myFont;
src: url(font_name.extenstion);
}
div {
font-family: myFont;
}
Convert your font to all cross browser font formats using Font Squirrel
You can convert fonts and download #font-face css too.
Example #font-face CSS:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}