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.
Related
I'm developing an android app with phonegap and wanted to use custom fonts. To do so, I was trying to use CSS #font-face and I first made a little test to check if it worked the way I was expecting. I created a simple index.html file and a .css file in the same directory where I also copied the file with the font I wanted to use, which is in woff2 format. Here's the code for the css and html files:
#font-face {
font-family: Roboto_Bold;
src: url(/roboto_bold.woff2) format(woff2);
font-style: normal;
font-weight: 700;
}
p {
font-family: Roboto_Bold;
}
<p>prueba</p>
The problem is that, when I open index.html with Google Chrome, the font roboto_bold doesn't appear. The text is written with the browser default font, and no errors are shown in the console. I've tried everything to solve it (changing the font formats, checking the links, checking my browser version), but I couldn't find a solution. Any idea why #face-font isn't working?
Here is a screenshot of the files in my directory:
Remove the / infront of the font name, as your font file is in the same directory as your CSS file.
Also, try removing the underscore in the font name, and placing it in quotes - http://www.w3schools.com/cssref/pr_font_font-family.asp
#font-face {
font-family: 'RobotoBold';
src: url(roboto_bold.woff2) format(woff2);
font-style: normal;
font-weight: 700;
}
p {
font-family: 'RobotoBold',sans-serif;
}
UPDATE
As your console is showing no errors, it's not a path related issue. I would suggest Chrome is unable to display WOFF2 files, and you may need to include extra versions of the file, such as WOFF. These are the two I use as a bare minimum.
You can create a whole font kit by uploading your font file (copyright applicable) to a webfont generator tool such as https://www.fontsquirrel.com/tools/webfont-generator
I tried the code in a different computer with a version of Chrome for another OS and it worked fine. It seems it was all a problem of platform
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
I have been trying to get the ttf files rendered in Chrome and Firefox but it just doesn't seem to work. While rendering the .woff file is working fine.
I downloaded the collection from http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher and then renamed the Philosopher-Regular.ttf to fancyfont.ttf and then tried:
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
But the font just doesnt seem to add on to the webpage. However if i rename the woff file to fancyfont.woff and try :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
then it all works fine for Chrome and Firefox.
Any solutions to this problem as i have seen the ttf files being rendered onto the browser?
Do not download a TTF from the Google Font API website. It is not intended for you to download the fonts. Instead, you link to a stylesheet which contains #font-face definitions for the font(s) you want to use.
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
(Do not include multiple <link>s if you want several fonts; instead, use the tool to add all the fonts you want in your page to a collection, and it will generate the appropriate <link> tag.)
Letting Google host the fonts is just like using a well-known CDN for jQuery: there's a good chance that a significant portion of your users will already have the font cached before they even come to your site (by virtue of the fact that they may have browsed other sites that used the same font).
Note that the CSS you link to from the API is actually generated for each individual request by Google's server, tailoring it to the user's browser. Based on the user agent, the most appropriate formats (WOFF, EOT, TTF, etc) are selected and only those are listed in the stylesheet.
Because formats like WOFF are much more efficient size-wise than TTF, most browsers will never see a TTF version. Don't worry though – your font will be rendered correctly in all browsers.
I had some issues rendering a TTF font inside Chrome. convert it into Woff solved it. There is some good onlines services for that. You can find them easily. Also, the size of my font got smaller : 29 Ko to 6 Ko, I don't see anymore reasons to use TTF
Actually the issue was that the TTF files can not be renamed or that they should not be renamed. As I did the same they were not being rendered by the browser. While the renaming of the WOFF is just fine as they are compressed files.
The issue was definitely renaming as when i used the Philosopher-Regular.ttf in font face as :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/Philosopher-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
it worked just fine.
I'm having a font-face the menu of my webpage. For all browsers is loading fine except for Internet Explorer. Here's what I'm using in my css:
#font-face{
font-family: 'MyriadProSemibold';
src: url('fonts/MyriadPro-Semibold.eot');
src: local(MyriadPro-Semibold), url('fonts/MyriadPro-Semibold.otf') format('opentype');
}
Fonts are in a folder called fonts that is located in the same folder as the css file. I don't know how to debug this problem is anyone could point out what need to be done in order to make them work for IE9?
I suggest you put the opentype file into the font-face generator. Click on generate and download the .zip file you get.
Copy the fonts to your webhost and copy the CSS styles in the stylesheets.css into your stylesheet, you can change the name and you need to correct the paths to the new paths. Now it works on FireFox 3.5+, Chrome4+, Opera10+, iPad, iPhone, IE4+ (!) and Safari3.1+.
This is the font-face format I use:
#font-face {font-family: 'MyriadProSemibold';
src: url('MyriadProSemibold.eot');src: url('MyriadProSemibold.eot?#iefix') format('embedded-opentype'),url('MyriadProSemibold.woff') format('woff'),url('MyriadProSemibold.ttf') format('truetype');}
I'm building a page with this font, see here: jsfiddle sample
The font is called Cursive; it's not a web-safe font. On Chrome and Firefox, it looks great. However, in IE, it doesn't show.
I'd like to use a #font-face css declaration but I'm wondering where I can find the font file for it? I assume it's already loaded on my computer somewhere; I'd like to find the files I need to them on a server.
Since the fonts we are looking at could be completely different based on what fonts we have installed on our separate machines, why not try What The Font?
Take a screenshot of the text you see and upload it to Whatthefont -- it will detect what font it is using and give you several options to download both free and paid.
From there you can include it in your css file.
Your looking for the actual font file? There are literally hundreds of free font download sites within Google's grasp. Here was my top result.
Once you have found a file you like, ftp it to your server. Then using a css #font-face to include it in your stylesheet.
The benefit of using a service like Googles font api is that it is free and fast - however, there is nothing stopping you from doing this from your own server and with your own file.
<style type="text/css">
#font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
sample via hangy
I can't see it on my machine. But is this the one you're looking for:
http://openfontlibrary.org/font/cursive
It looks like there is an open license, so you could run it through FontSquirrel to get a nice #font-face declaration.
The font that your browser is rendering as 'Cursive' is nothing more than our old friend 'Comic Sans'.
Comic Sans
"Cursive"
Compare the two links to verify