I have a font named "Contempory___Modern_Font_by_MyFox.ttf" (Font can be found here: Download Contemporary Modern Font
I want to use this font through out a site that i am developing for myself.
I have tried the #font-face{}, but still unable to see the site fonts being displayed like in the font.
my code for the #font-face{} is:
#font-face {
font-family: "My Custom Font";
src: url(font/Contempory___Modern_Font_by_MyFox.ttf);
}
How can I achieve showing this font on all the pages of the site? I am using Dreamweaver CS5 to code my website, it is in simple HTML. Please suggest!
I will suggest you to use .woff formate font for website.
In some of the browser .ttf create issue.
You can convert the .ttf font to .woff
HERE
Try this
HOW TO LOAD AND USE IT:
#font-face {
font-family: "NameForFontFamily";
src: url(fonts/fontfilename.woff);
}
in style of html DOM use:
font-family: NameForFontFamily;
FOR EXAMPLE:
<a class='addfont' href="#" style="font-family:NameForFontFamily;">CLICK ME</a>
OR
.addfont{
font-family:NameForFontFamily;
}
You need to generate webfonts for use within the font-face tags ..
Try this - http://www.fontsquirrel.com/tools/webfont-generator
Related
I can't change the fonts to custom fonts in my project. But The following code does work in a separate test case, but I don't know why this doesn't work in my working project. I don't know what is causing the issue.
I can change the fonts to some default fonts but not custom fonts.
#font-face{
font-family: nazanin;
src: url(nazanin.ttf);
}
.customFont{
font-family: nazanin;
}
<h1 class="nazanin">This is a custom Font</h1>
👋
First of all, is the path to your font really nazanin.ttf? Is it in the same folder as this current CSS file?
If it is in a separate folder called "fonts", then try something like this:
#font-face{
font-family: nazanin;
src: url(../fonts/nazanin.ttf);
}
Second of all, the .ttf file extension is for Safari, iOS, and Android. Are you using a different browser? If so, that's the problem. I would suggest going with the .woff extension because it is compatible with most modern browsers.
This is work in progress, but I've uploaded the code here
http://crea8tion.com/ChristmasMessage/index.html
I've downloaded and placed the font MerryXmas.ttf into the root directory where my index html document is held.
In css I've added
#font-face{
font-family: "MerryXmas";
src: url('MerryXmas.ttf');
}
h4 {
font-family: MerryXmas;
}
But the font should look like this http://www.dafont.com/merry-xmas.font but you will see it doesn't. The site is built using a foundation 5 framework, but I've removed the style link at the moment to make sure that wasn't impacting the font.
From using Google console as far as I can see the font is being referenced correctly, just not sure what I'm over looking?
Change src: url('MerryXmas.ttf'); to src: url('../MerryXmas.ttf'); and try again
the font path must be relative to the CSS file
I downloaded a font which I would like to use on a webpage. Of course this font isn't installed on the user's computer. How can I let a user's computer display that font? (I thought is was called: embedding a font but I could be wrong)
Thx for any help
VVW
You need to use #font-face.
A very easy way to generate the required cross-browser CSS and different formats of font file is to use:
http://www.fontsquirrel.com/fontface/generator
You simply upload your font and the generator does all the hard work.
If the users have a relatively new/up-to-date browser:
#font-face {
font-family: font-name
src: url(path/to/font.ttf);
}
element {
font-family: font-name;
}
First, we add the #font-face declaration wherein we specify the path, filename, and font-family name for our custom font. Then we add the font choice in a CSS rule to our...element.1
Citation:
A List Apart: Taking Advantage of HTML5 and CSS3 with Modernizr.
References:
#font-face, Mozilla Developer Center
CSS #ten, by HÃ¥kon Wium Lie
You are right that is called font-embedding. Here is what you need:
Embedding fonts in CSS
Newbie question: Can I embed any font into HTML. For example the Rockwell font?
Thanks!
Yes. Where FontFamilyName is what ever you want to call it and src: url('/font/font.otf'); is a link to the fonts file (much like using a background image).
#font-face {
font-family: FontFamilyName;
font-weight: bold;
src: url('/font/font.otf');
}
You can then use the font like any other font family. ex:
p
{
font-family: FontFamilyName;
}
Google offers a pretty nice service called Webfonts, check it out!
If you follow the bulletproof font-face syntax you can embed most any font into webpages.
You can use a free font-conversion service like font squirrel to convert your font's into the formats you need to support all browsers :)
take a look at #font-face that allows you to use any font on your page - if the user does not have that font installed, it can be downloaded from a server and used to render the web page.
An example
#font-face {
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
font-weight:400;
}
Take a look at font-face website for more details. Be aware that there are some cross browser issues with #font-face - for this, I would recommend looking at the stellar work of Paul Irish in this regard.
It is possible using #font-face in your stylesheet, but you have to remember that IE doesn't always handle these properly. Use this code:
#font-face {
font-family: (the name you want to call it by);
src: url('path/to/font.eof');
}
You can also use .otf, or .ttf.
Not really. You are limited to cross-browser fonts if you want to be sure the page will display the same across browsers.
That being said, there is an interesting service called Typekit that lets you embed fonts using JS and CSS3. It only works for modern browsers.
I m getting a problem while embedding a font in my web site i m using a css3 rule of font selector code is
#font-face {
font-family:'VoltaEFTU-Regular';
src: url(/fonts/VoltaEFTU-Regular.ttf) format("truetype");
}
.sample { font-family: 'VoltaEFTU-Regular'; font-size: 10em; }
I put my volta font in truetype format in fonts folder of my website folder but its not working
my html code is :
<div class="sample">
typetrigger
</div>
Check if the ttf file is at the location you point to.
You should use firebug to check if your font gets applied in the css.
If yes, your font is not loaded.
If no, then the css class is not applied or overwritten by something else.
Firstly, you need to add comas to the src. It should be:
src: url('fonts/VoltaEFTU-Regular.ttf') format('truetype');
I also would recommend heading over to font squirrel though, and creating a woff and eot files to use along side the ttf.
You can read up on all the different formats here:
http://www.fontsquirrel.com/fontface/generator
Code looks good. I agree with Thariama. Try specifying the path relatively to your CSS instead of absolute (../fonts/VoltaEFTU-Regular.ttf) if your css file is in a subdir of your web root. Also, make sure the browser you are testing in supports #font-face and truetype fonts