I see lots of sites that display great fonts that are not images. For example: The Firebug site and Happy Cog. There seem to be lots of CSS 'tricks', bits of JavaScript and whatever other trickery employed by various web designers to get the job done (I'm not suggesting either of the aforementioned sites do this).
My question is, what is acceptable in terms of CSS / font practices? Is it still that case that only a core set of common fonts should be used? If not, what are the acceptable / reliable practices to display nice looking fonts, particularly for Mac / Windows consistency?
You can embed fonts now. Here's a good place to start: http://www.google.com/webfonts
If you have a font you would like to use, you can use a generator and it will make files that you simply need to include with your website
http://www.fontsquirrel.com/fontface/generator
Simply include something like this in your style sheet:
#font-face {
font-family: 'ArchitectsDaughterRegular';
src: url('fonts/ArchitectsDaughter-webfont.eot');
src: url('fonts/ArchitectsDaughter-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/ArchitectsDaughter-webfont.woff') format('woff'),
url('fonts/ArchitectsDaughter-webfont.ttf') format('truetype'),
url('fonts/ArchitectsDaughter-webfont.svg#ArchitectsDaughterRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Just make the url point to where you actually have that font. There are also a lot of premade fonts available.
Related
In /src/site/globals/site.variables, I can see how you can define google fonts, which get imported from when you compile. What I am interested in is defining my own custom fonts where I will supply my own font files.
I can’t find docs on how to do it. While I know how to do it in CSS, I am wondering if it is already built-in in this framework but I have simply missed it.
Thanks!
I don't believe there is a built-in way to do it. Here's how I did it.
I used the standard #font-face css rule. I then placed it in the site.overrides file. I am using a less variable (#font-path) to simplify my file paths.
#font-path: '../../fonts';
#font-face {
font-family: 'my-font';
src: url('#{font-path}/my-font.woff') format('woff'),
url('#{proxima-prefix}my-font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
You'll have to make sure that the font files are served up appropriately by your server.
The above can be turned into a less mixin based on your usage as well.
A good resource on #font-face and formats: https://css-tricks.com/snippets/css/using-font-face/
A great answer on how to use different font weights/styles: https://stackoverflow.com/a/10046346/7681976
I'm using for a website the font Oxygen via GoogleFont. However, for webdesign purpose, I downloaded in my computer the Oxygen font via FontSquirrel.
Apparently it's the same, but it looks different and I have size issues. So I was thinking:
Is there a way to declare "I want to use the GoogleFont font and not the font stored in the computer even if it has the same name"?
Because if someone has a totally different font with the same name, there could be a lot of display problems.
EDIT: What about downloading the font on Google's server and hosting it on my website? (The font is 100% free for commercial use.) But why do a lot of websites use Google Fonts if it could be that simple?
If you have the web fonts you could host yourself and give them any name you want in the css and avoid the potential of the local font loading.
For example:
#font-face {
font-family: 'myspecialfont';
src: url('oxygen-webfont.eot');
src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),
url('oxygen-webfont.woff2') format('woff2'),
url('oxygen-webfont.woff') format('woff'),
url('oxygen-webfont.ttf') format('truetype'),
url('oxygen-webfont.svg#oxygenregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family: "myspecialfont", sans-serif;}
Just make sure you're pointing the CSS to the correct path for those files (e.g. if you put them in a fonts folder it'd could be "../fonts/oxygen-webfont")
The main reason people use google is they've optimized it for serving fonts, it takes load off your server, and potentially people have the font cached from google making it load faster. If it's an uncommon font and your server is decent these may negligible.
This might be a bit of hasty conclusion, but my question arose when I find that FontSquirrel.com does not generate the smiley (☺) with their #font-face generator.
Instead of the usual bulletproof standard (as laid out by Paul Irish regarding the smiley), the FontSquirrel's #font-face generator generates only this:
#font-face {
font-family: 'sansationregular';
src: url('sansation_regular-webfont.eot');
src: url('sansation_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sansation_regular-webfont.woff') format('woff'),
url('sansation_regular-webfont.ttf') format('truetype'),
url('sansation_regular-webfont.svg#sansationregular') format('svg');
font-weight: normal;
font-style: normal;
}
I realize it might be too hasty to conclude that by FontSquirrel abandoning the smiley means the smiley is no longer relevant, but considering FontSquirrel's #font-face generator seem to be the most popular and the most used generator out there, it makes me wonder why they don't include the smiley anymore. Especially because they seem to have included it before...
Just in case anyone's not familiar with the smiley, there is a good explanation here.
EDIT - Ran into some more info that may interest: https://stackoverflow.com/a/4520467/1455709
Android 2.2 devices will suffer from local() usage, your #font-face wont work at all.
I can confirm that on Android 2.3.6 (default browser) local() will break your #font-face declaration.
Android 4.0 (default browser) works fine with local().
Unsure of everything in between. So again, I think it's down to your user base, or the effort you want to go to with multiple stylesheets to ensure your font works everywhere.
Well, they are only generating the code needed to display your font on all browsers. It's your decision as to whether you want to take the "risk" as to whether the user has a font by that name installed locally.
Depends on your audience I would say.
Does anyone really install fonts onto their local machine anymore? A lot of people on this site might, designers defiantly will, but the general public? Probably not.
What's the chance that the font your using has the same name as another different font? Small.
What's the chance the user has that particular other font installed? Very small.
If you want to ensure that the user downloads and uses your particular font, use it.
If you want to use Windows fonts (you're probably not allowed) and want them visible on Macs, then you wouldn't want to use the smiley face, so as to save every Windows user from downloading a font they already have (that actually is the same).
If you want to use a custom font called 'Verdana' you will defiantly want to use a smiley face. That, or make the font-family unique... I guess with a smiley face... But that would look messy, so use the local attribute.
The newest "bullet proof" method can always be found by using fontsquirrel's WEBFONT GENERATOR.
So since writing your question, .woff2support has been added.
Anyone wishing to clarify what the up-to-date method is the you should do the following.
Upload a tiny font file and this will generate a zip file with your font converted into all formats but more importantly it also contains a CSS file with the "bullet proof" method.
Which currently looks like this.
#font-face {
font-family: 'font-name';
src: url('fontawesome-webfont-webfont.eot');
src: url('fontawesome-webfont-webfont.eot?#iefix') format('embedded-opentype'),
url('fontawesome-webfont-webfont.woff2') format('woff2'),
url('fontawesome-webfont-webfont.woff') format('woff'),
url('fontawesome-webfont-webfont.ttf') format('truetype'),
url('fontawesome-webfont-webfont.svg#font-name') format('svg');
font-weight: normal;
font-style: normal;
}
I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).
And they support a nice amount of browsers.
How does one do that? While also preventing people from having free access to download the font, if possible.
Generically, you can use a custom font using #font-face in your CSS. Here's a very basic example:
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
Then, trivially, to use the font on a specific element:
.classname {
font-family: 'YourFontName';
}
(.classname is your selector).
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS #font-face rules, so you don't have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.
To make sure that your font is cross-browser compatible, make sure that you use this syntax:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
Taken from here.
You have to download the font file and load it in your CSS.
F.e. I'm using the Yanone Kaffeesatz font in my Web Application.
I load and use it via
#font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
in my stylesheet.
Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.
Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:
EOT is IE only,
TTF has partial IE support,
WOFF enjoys the widest support but is not available in some older browsers
WOFF 2.0 support is a work in progress for many browsers.
If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS
#font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.
here's a nice tutorial: Make your own font face web font kit
Although im not sure about preventing someone from downloading your font.
Hope this helps,
there's also an interesting tool called CUFON. There's a demonstration of how to use it in this blog
It's really simple and interesting. Also, it doesn't allow people to ctrl+c/ctrl+v the generated content.
I am working on Win 8, use this code. It works for IE and FF, Opera, etc.
What I understood are : woff font is light et common on Google fonts.
Go here to convert your ttf font to woff before.
#font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months.
And it makes no sense to prevent people from using fonts.
A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.
But if you want to implement a font into your website read this:
There is a pretty simple and free way to implement fonts into your website.
I would recommend Google fonts because it is free and easy to use.
For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers)
This is how it would look like:
HTML
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
CSS
body {
font-family: 'Bangers', cursive;
}
I'm making a website for a friend and he wants the text font to be AR BONNIE. Does anyone know the CSS for this? I can't seem to find the font anywhere.
Go to this site: onlinefontconverter and create woff, eot, svg and ttf files
and put this in css
#font-face {
font-family: 'ARBONNIE';
src: url('ar-bonnie.eot');
src: local('☺'),
url('ar-bonnie.woff') format('woff'),
url('ar-bonnie.ttf') format('truetype'),
url('ar-bonnie.svg#ARBONNIE') format('svg');
font-weight: normal;
font-style: normal;
}
and you can set p { font-family: 'ARBONNIE'; }
AR BONNIE is not een valid webfont.(see http://web.mit.edu/jmorzins/www/fonts.html)
There are different types of solutions.
Use javascript: sifr or cufon or typeface
Use css3 - #font-face (not supported by all browsers)
Always check if the font is legal for your project. EULA rights...
Andes, from Dafont, is pretty close:
But since its not web font , you have to embed exclusively.
You can also take a look at
http://code.google.com/webfonts
its google web font , you can use in css.
http://www.dafont.com/search.php?psize=m&q=andes
If you want to use a font in CSS, you must make sure that all of your visitors have that font installed, or provide it in an url, or display it as a bitmap or via flash.
A great option is using typeface.js. I've not used it myself in any of my sites, but I loved the concept, and the examples they've provided.
AR BONNIE is a replicated version of the Ascender "Plaza" font which was then resold as AR BONNIE.
Click here for the Plaza font.