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.
Related
I have seen a font that I really like on the sendgrid.com site. The font is:
"Proxima N W15 Reg"
Here's a link to a page that uses it:
An example page using the font
But I cannot find out anything about this font with google. Does anyone have any ideas where I could search for this font?
They are available on MyFonts, TypeKit, Fonts.com and a myriad of other websites, as a quick search will show.
Slightly more edgy, they are downloaded along the webpage you're directing to, as woff files, as the Web Inspector of your web browser will show you.
I have a .otf font that won't load on any browser. I feel I've followed the #font-face rule so I'm very confused. It's on my portfolio site at the bottom, the social media buttons. They read as a f and an i but they should be a facebook and linkedin icon. Any ideas? Thanks
my portfolio site
Font Squirrel has a fantastic generator.
http://www.fontsquirrel.com/fontface/generator
I'd recommend using it to generate your CSS.
Your resources aren't pulling up the socialico.otf font... Make sure it's in the right directory.
see: http://wrobbins.me/fonts/socialico.otf (404)
Your font url appears as not found for me too, so I did a quick Google and This sounds similar to your problem. Could be that you need to tell your site how to handle that particular file extension.
In Chrome it says your font url isn't found.
Edit
I googled and this answer mentions it being a server problem.
I was searching the best-practice to implement a font inside a website and I still didn't found a real answer to this.
On forums and blogs many people say that using #font-face is the best way, other using Typekit or Cufon.
I don't like these 3 options.
Font-face render my fonts grainy.
Typekit is not freeware and do not have all the font that I'd like to use.
Cufon use canvas.
There are other way to implement fonts?
There is a way to render it with no grain?
Screenshots:
Mac
Windows
Font rendering depends on the Operation system, some of the font specific settings in the OS, the browser and the font itself. The better the font is prepared for screen usage (hinting,…) the better it looks. Their is no »do it like this and it is always fine way«, there are too many factors that play a role. In the images above you are trying to render very thin font, this is always problematic, especially if the font is badly hinted and/or set in a small size. The advantage of services like TypeKit and google webfonts are that they provide you with screen optimized fonts, so if you are not familiar with fonts themself you should prefer some prepared fonts, or optimize the font yourself if it is too bad. You should also keep in mind that not every font is suitable for screen usage and i think that can be one reason why google and typekit do not provide all fonts.
good luck…
EDIT:
once I forgot to enable some kind of font rendering option on windows, I think it was somewhere at: leftclick computer > properties > performance, but I am not sure where exactly, I do not use windows anymore to find it, but the start was at »leftclick computer > properties« and it was about the »antialiasing« of fonts. After ticking the box it looked much better. It was a thin font too in this case…
greetings…
What exactly do you mean by 'grainy'? I only ever see that in older versions of internet explorer, and there are CSS properties for font smoothing.
Using TypeKit uses #font-face, it's just loaded in a different way. Have you tried Google's webfonts too?
Here is a great article on the best method to use: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype');
}
I use some fonts in my new website that do not exist by default on normal user computers.
After some search I got that there are some tools that might help, like Google web-fonts.
Fonts that I used are : Bebas , Sansation and Quicksand
But I couldn't find them on Google web fonts.
How do I do use these fonts ?
And what are other cross browser solutions?
Different fonts are created by different font foundries. Not all fonts will be found in the same place. And not all fonts are available to be used as web fonts because of font-licensing.
Fonts are not always free and good fonts are rarely free.
You can usually find out if a font is available as a web font, and who owns the font by googling the font name plus "#font-face".
You absolutely should know where you'll be getting the fonts you'll be working with in advance. If you have three fonts that come from three different font-services then that's bad. Firefox especially wont like it much and you'll have some pretty bad fout problems.
Fortunately for you, all those fonts are available through font-squirrel
Bebas
http://www.fontsquirrel.com/fontfacedemo/Bebas
Sansation
http://www.fontsquirrel.com/fonts/Sansation
Quicksand
http://www.fontsquirrel.com/fonts/Quicksand
What you will want to do is download all those fonts, them run them through the #font-face generator
http://www.fontsquirrel.com/fontface/generator
HOWEVER It reads to me like you don't really understand what #font-face is, or how it works. So I'd recommend reading up on it some more.
I am not sure what exactly you mean, but if you want to convert your website's font into a custom font which is viewable for the visitor, you could try use the curfon solution.
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.