Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use webfont with @font-face

I want to change the font in my application to a custom font but the following code is not working:

@font-face 
{
font-family: "ArnoProBold"; 
src: url("resources/fonts/ArnoProBold.ttf");
}
@font-face 
{
 font-family: "ArnoProCaption"; 
 src: url("resources/fonts/ArnoProCaption.ttf");
}
@font-face 
{
 font-family: "Arn";
 src: url("resources/fonts/ArnoProLightDisplay.ttf");
}
like image 902
Rithesh Avatar asked Jul 14 '12 07:07

Rithesh


People also ask

How do I use font faces in sass?

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced. Create a font face rule that applies to bold and italic text. Create a font face rule that only sources a WOFF.

How do I convert a font to Webfont?

To convert you font, you first need to open the Webfont Generator and click on the box marked with an + in order to upload the OTF/TTF font file. Locate the font file on your computer and click Open. The font file is now uploaded to the Webfont Generator.

How do I use face fonts in HTML?

You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag.

How do I use Google fonts in Font face?

Google Fonts provides free fonts to use in an HTML file with the <link> tag or the @font-face property in CSS. Add local fonts to a document with @font-face and the path to the font's source. Then use the named font-family rules as you please (along with a web-safe fallback font), and you're good to go!


1 Answers

Hey @Ritesh please try something like this,

@font-face {
   font-family: 'ArnoProBold';
   src: url('resources/fonts/your_file.eot');
   src: url('resources/fonts/fonts?#iefix') format('embedded-opentype'),
        url('resources/fonts/your_file.woff') format('woff'),
        url('resources/fonts/your_file.ttf') format('truetype'),
        url('resources/fonts/your_file.svg#ArnoProBold') format('svg');
   font-weight: normal;
   font-style: normal;
}

and so on.

I hope this helps. :)

like image 126
hekomobile Avatar answered Oct 21 '22 11:10

hekomobile