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");
}
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.
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.
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.
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!
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. :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With