I've been working on my first HTML5/CSS3 site, and it's been going well for the most part. Totally loving the new #font-face property, and it works perfectly on my machine. The problem I'm having is when previewed on another device (computer, ipad, iphone), it doesn't seem to be recognising the #font-face property and uses the fallback font instead.
Site link: http://williamben.com/
Here's the CSS I'm using:
#font-face { font-family: 'League Gothic';
src: url('_/type/league_gothic.otf') format('otf');
}
Any help would be appreciated.
Thanks in advance.
It is working on your computer as you have the font installed. If you disable the fonts it will not work. It is a common mistake using web fonts as most fonts people use as web fonts they also have installed, so if the web font declaration is wrong, they don't spot it.
It looks like the reason is because you are pointing to a font that doesn't exist, or you have the path wrong. http://williamben.com/_/type/league_gothic.otf doesn't exist.
Agree with dstorey. Also, maybe check out font squirrel to get more coverage:
http://www.fontsquirrel.com/fontface/generator
From the looms of things the file path may be wrong. But youll still want to use the fontsquirrel generator because it will give you a few more lines of code that ensure the font works in near every browser. Then has a fallback to a basic font stack if all else fails.
Related
I'm trying to use a downloaded font on MacOS and iOS in Safari. There are many war stories out there about bulletproof CSS and such, but I haven't found the correct incantation. Here's my best effort, and I've tried many variations with different quoting, casing and so on. The font is called AHRDIcons, and it's installed and working on both operating systems. That's all I need---I don't need a web font, I just want something that will work on systems that have the font already available.
#font-face {
font-family: AHRDIcons;
src: local(AHRDIcons);
src: url("AHRDIcons.ttf") format("truetype");
src: url("file:/Library/Fonts/AHRDIcons.ttf") format("truetype");
}
This works on MacOS if the page is loaded locally (as file:///Users/.../cup.html), and this is because of the 3rd src option. It doesn't work on MacOS or iOS if the file is served by http (as http://.../.../cup.html), which I would expect to work using one of the first 2 srcs. But instead there are just little squares.
Conclusion: I don't think this is possible. Maybe there are defaults writes that would permit it, or maybe the whole fingerprint-detection could be turned off, but as I continue to read about this issue here and on other sites, I haven't found anything to lead me along those lines. And not sure I would do them anyway.
I solved the problem by hosting the ttf on the server, and using a src: url("http://.../../AHRDIcons.ttf") clause in the font-face declaration.
Thanks to those who helped!
If the font is already installed on the operating system and your only users are going to be on said operating system, then you don't need to add it with font-face at all.
Double click the ttf in OSX, click the 'info preview mode' icon and check what the font's family is. Then just use that in your CSS:
Here's an example with Apple Symbols:
p {
font-family:"Apple Symbols";
}
I need help please, I'm using a Custom font for my new website design which I had to do download. On my computer website looks good with this new font. Unfortunately it is not the case for any other user who did not download this custom font.
pls see: www.vanessawiacekwebs.com
I have tried use Font Face but it does not work and I do not know why ?
Font: Marathon II; http://ufonts.com/q177208
Thank you,
You're incorrectly directly linking to the font source.
Your incorrect CSS code:
#font-face {
font-family: Marathon II;
src: url(http://ufonts.com/q177208);
}
You need to download the fonts, upload them to your file directory and then use the #font-face rule to link to font files.
A multitude of beginner's tutorials exist online: https://css-tricks.com/snippets/css/using-font-face/
There is an easy way and a hard way. The easy way is to use Google Fonts. Web Fonts were a huge PITA, and Google Fonts makes it easy.
https://www.google.com/fonts
There are other options, but after 20 years of web development, this is the only solution I use.
I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.
I'm trying to make my webpage use the font Segoe Print, which is not a default browser font. I have the ttf file though, is there any way I can employ this .ttf file so that every visitor (no matter what browser) can see the font ?
I searched and found some solutions, one was saying "Convert the font using this site"
but it gives the error:
Microsoft has requested that their font Segoe Print to be blacklisted
by the generator
So how can I use this font on my website ?
I also found a solution that suggests the following CSS rule :
#font-face
{
font-family: myFirstFont;
src: url('Segoe.ttf'),
url('Segoe.eot'); /* IE9 */
}
But, will it work in non-windows browsers? I mean, does the user have to have the ttf file in their computer, or will it be loaded from my website ?
Thanks !
You cannot, in any legal and morally acceptable way. It would be illegal and morally wrong to give advice on committing the crime that such unauthorized use would constitute.
You should thus either abandon the idea or try and find a free font, or a font that may be legally used for a fee, with characteristics sufficiently similar to the font that you want to use.
You can use Kirsle to convert your TTF font to EOT. Then you need to import three format of your font in the top of your CSS, with this format:
#font-face {
font-family: 'Segoe’;
src:url('fonts/Segoe.eot?#’) format(‘eot’),
url(‘fonts/Segoe.woff’) format(‘woff’);
url(‘fonts/Segoe.ttf’) format(‘truetype’);
}
Remeber to have the ?#, it will deceive the IE to only see the first line and download it, as other browsers can't see the first line and will download the TTF format & New browsers will download the WOFF that have a less size, so will download faster.
Simply use font-family: Segoe to change an item's font in your CSS.
Why not buy it? There are reputable sources where you can purchase a license to use this font as a web font.
if i place my ttf font file in my websites root folder lets say named AMC.tff and in my website use <font face="AMC"> is it going to work... if not than what is the method to use unusual fonts in your website
You can include True Type Fonts with the help of the CSS 3 property #font-face. The following CSS would apply your AMC font to all <h1/> tags:
#font-face {
font-family: "AMC";
src: url("./AMC.ttf") format("truetype");
}
h1 {
font-family: "AMC", sans-serif;
}
For browsers that have no support for webfonts you should specify a similar alternative to your font. In the above example sans-serif would be used if AMC cannot be found because the #font-face tag was not recognized by the browser.
No, the fonts in a browser is based on fonts installed on the visitor's machine.
I don't know much about this area, so I can't tell you which one of these works or is considered best practices, but check out:
SiFr
typeface.js
Cufon
No. Apart from the fact that <font>is deprecated, you have to use the CSS3 #font-face directive, or older more compatible methods such as Cufon and Sifr.
If you need to use Custom Font for your site, you can give a go for Cufon
http://cufon.shoqolate.com/generate/
Detailed Tutorial for using CUfon on your site
http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/
Forgot to add, You can also use CSS3 property
#font-face
Supported by FF3.5 and above, Opera 10 and above, IE 7,8(not sure about 6)
Check this link out:
How to get non-standard font with effect in use of web site?
I have explained in detail how to embed fonts in a webpage and make it browser compatible.
Font embedding is also a risky affair, as the font license sometimes doesn't allow.
PS - And please make sure that you don't repeat questions in stackoverflow as this question has been answered many times.