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
Related
I am working on a website based on a series of old video games called Quest for Glory, which involves using original fonts from the games. One such font is called gloryquest, and I notice it displays just fine on browsers such as Chrome, Brave and Opera but does not display on Firefox. Whenever I look at this site in Firefox, it only shows the fallback font.
Here is a link to screenshots showing the difference.
The issue is evident on these pages:
https://bdferr.github.io/quest-for-glory1.html
https://bdferr.github.io/quest-for-glory4.html
https://bdferr.github.io/qfg-book.html
The font is a TTF which I have uploaded into a fonts folder in the same directory as the other website files on Github. Another font in the same folder, called Sierra-SCI-Menu-Font, displays with no problems, as seen here:
https://bdferr.github.io/quest-for-glory3.html
The only difference I can see between the two is that the one with the problem (gloryquest) has a fallback font, Pixelar Regular W01 Regular, which is linked to from a tag in the head like so:
<link rel="stylesheet" href="https://fast.fonts.net/cssapi/35bb4fcb-e728-4a43-9ecf-79aafffd52cb.css"/>
Another TTF font called cardinal-regular has a similar problem. It always displays in Chrome and other browsers, but never in Firefox. It is specified in the relevant stylesheet like so:
#font-face {
font-family: cardinal;
font-style: normal;
src: url("/fonts/cardinal-regular.ttf") format("ttf");
}
Gloryquest is specified in the relevant stylesheets like so:
#font-face {
font-family: gloryquest;
font-style: normal;
src: url("/fonts/gloryquest.ttf") format("ttf");
}
The one that always works is specified like so:
#font-face {
font-family: SierraSCImenu;
font-style: normal;
src: url("/fonts/Sierra-SCI-Menu-Font.ttf");
}
That is, I do not specify "format("ttf")" there, but if I leave that out for the other pages I get error messages like this:
Failed to decode downloaded font: http://localhost:8000/fonts/gloryquest.ttf
OTS parsing error: cmap: Failed to parse table
I do not get any error messages from Firefox. I do not see any problems using the fonts on my own machine, such as in Word.
Please advise!
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 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 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