Tag Info

Hot answers tagged

20

This is the standard way of loading with @font-face, hacky fixes and all!! @font-face { font-family: 'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), ...


13

For Helvetica I would just specify the font-family with CSS like so: body{ font-family: Helvetica, Arial, sans-serif; } This says, "use Helvetica if it's available, Arial if it's not, and the system's default sans-serif font if neither are installed". Helvetica is installed on 100% of Mac and iOS devices [source]. The other two cover the rest, and ...


12

Ends up with a message saying it's blocked by Adobe. FontSquirrel allows font publishers to request to be put on a blacklist. Not only that sometimes if the font can be converted, it often looks like crap when viewed in a browser. Sometimes automated conversion doesn't turn out perfectly and adjustments or alterations to the fonts are needed. ...


11

Yes and no, he's conflating two different things. In late 90's/early 2000's, when designers needed to use fonts for design reasons, they embedded graphics files in HTML pages. Search engines cannot understand these, nor can the screen readers used by blind and partially sighted people. This is because the only HTML code in the page for a menu link, for ...


10

I think the most important thing is to make sure your sizes scale no matter if the user does it through a JavaScript widget you add or through a the browsers default support. As for adding it or not, I think it depends on your targeted demographic. If you site is build for tech savvy people, I would definitely say no. If your site is built for older people ...


10

You're not going to get fonts, and some other things, to render identically across browsers. The handling of fonts is a perfect example. I know Safari on Windows likes to make text bold for some reason. Unfortunately this is how the web works. The variety of browsers, OSes, monitors, graphic processors, etc, out there means there's potentially thousands or ...


10

This is happening because Telex doesn't actually provide a bold weight, which means the browsers synthesize it, and that doesn't always come out so great. (Note as @toscho points out below, this is a general problem, not limited to Google Webfonts or even just font embedding.) WebKit/Safari seems to especially suck at this and in the mobile version you'll ...


9

It's not a safe choice: Bookman Old Style is bundled with MS Office. That means it's on a lot of machines, but far from 100% coverage. None of my machines, for example, has it. I would check out services like FontSquirrel or Google Web Fonts for a free, usable font that can be embedded into your site, and comes close to Bookman.


8

See this article about CSS in emails. Most mail clients don't support a head element in HTML emails, so non-inline CSS is out. This means you can't use CSS3's @font-face to declare custom fonts. However, you can specify fallback fonts by separating multiple fonts with commas. For example: font-family: Helvetica, Arial, sans-serif;


7

I can confirm the observation, using IE 9 on Win 7. Checking in the IE settings (Tools → Internet settings → General → Fonts), I can see BatangChe mentioned as the font under “user defined” for normal text, and the font used for serif looks like Batang Che but has different spacing. And setting fonts there does not seem to change this. I guess they only ...


7

Your designer should supply fonts with their license agreements, or be able to link to the agreement on the web that makes it clear whether or not the fonts can be used online. For example, the bundled fonts included with Photoshop and other Creative Suite applications are only licensed for use on the computer they were installed on [source]; you can't use ...


7

With CSS you can manage two classes and attached them to your HTML element like the following: .my-font { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; } .otherClass { background-color: white; } <div class="my-font otherClass">An HTML element</div> Otherwise, you can take a look to a solution like SASS. The used ...


6

I have spoken to someone in the Royal London Society for the Blind who works with assistive technologies regarding a project I was working on for them, and he is dead against them for the simple reason that users who need to increase font size in order to be able to read the content will not see the widget in the first place! I wouldn't waste the real ...


6

the other 4 are only used for a word or two Is that a literal statement? If so why are you bothering to embed these fonts at all, subsets or not? You shouldn't even be optimizing in this case, just removing. Make images of the text you need and use your favorite text-replacement technique. You're adding HTTP requests and download time to your site for ...


6

It's safe to drop Courier... Declaring "Courier New", monospace or just monospace should give you 100% monospace coverage on Windows, Mac, Linux, and mobile devices. Courier New has been available since Windows 3.1, and all common OSes have monospace fonts available if Courier New isn't available. (Android has Droid Sans Mono, for example.) ...but that ...


6

They're using font embedding, through TypeKit. This can also be accomplished locally by using your own properly-formatted font files, either by converting them with desktop font creation software or services such as font Squirrel (cf. previous question), though you'll have to pay close attention to your font licensing to see if that's allowed. But it can be ...


5

I wonder if it's safe to use font-face with special dingbats fonts. It's not - have a look at this article for more information. The article presents a simple example: <button type="submit">Purchase <span class="icon">6</span></button> The main problems, as mentioned in the article, are two fold: Users with browsers that ...


5

The best place to go is where CSS is defined - http://www.w3.org/TR/CSS2/fonts.html#font-shorthand. To answer the % question - it's the percentage of the font size of the parent element.


5

It's Restore, served by TypeKit. These fonts have been included using CSS3's @font-face. The fonts themselves have been included in the styles, using base-64 encoding, and can be referenced like any other font family in CSS once defined. Here's a quick example of the CSS that defines one of those fonts: @font-face { font-family:"restore-1"; ...


5

There are a number of font sellers online that let you purchase web fonts specifically for embedding in webpages. Helvetica is probably available from at least one of these stores (pretty much any major font store like Veer, MyFonts, FontFont, Linotype, Fonts.com, etc. now offers web fonts). Many of these web font providers also provide web font services ...


5

Generally speaking use no more than two fonts on a web page. All you should need is a titling font and a body copy font with some different weights like bold and italic. That said, you may also find you need additional fonts for specialist call outs or quotes (sometimes the italicized version of the body font just doesn't quite cut it), but you should use ...


5

Updated based on the comment provided by @Lèsemajesté This happens because FF and IE9 have chosen to implement an anti-cross-domain DRM mechanism for web fonts. I fixed it by using the following code in my htaccess file to pin the site to a single domain no matter which version of a url it's accessed from (this also seemed useful from an SEO point of ...


5

Search engines don't read fonts. They don't "see" pages. They read text. They read semantic markup. They try to find relationships. Fonts are completely useless and irrelevant to them.


5

The default fonts for WebKit/Safari under Mac OS X are as follows: Monospace -> Courier Sans-serif -> Helvetica Serif -> Times Standard (default) -> Times This is gleaned directly from the WebKit source, specifically the XML/plist file at Source/WebCore/Resources/DefaultFont.plist.in that's available online here. It includes the following lines: ...


5

Yes, there are privacy concerns with using Google Web Fonts. If you have strict privacy concerns you should probably not use the service. Users of Google Web Fonts are bound by Google's generic API terms of service, which includes this clause: By using our APIs, you agree that Google can use submitted information in accordance with our privacy ...


5

As specified in comments, the extra-large fonts in Firefox would seem to be caused by the font-size-adjust property (which, incidentally, is only support by Firefox currently AFAIK). Removing this property altogether (or setting it to an appropriate value - see below) resolves the issue in Firefox. The idea behind font-size-adjust is to make fallback fonts ...


4

You need to keep in mind that different operating systems (Windows, Mac, Linux) have different default fonts that come as part of the OS. This means if you choose a font that is available on Windows but not on a Mac or Linux those users will see a different font. That font will be the closest match the OS can choose. If you want your site to look uniform ...


4

You want the Font Finder add-on for Firefox: https://addons.mozilla.org/en-US/firefox/addon/4415/ Lets you click on some text on a webpage and shows you the font information for that text - including which font has been selected from the family. I've been using it for ages and it's very useful.


4

You can do it like this: @font-face { font-family: Calibri; src: local('Calibri'), url('http://blabla.com/calibri.eot'); } Source and more detailed explanation.


4

See these two SitePoint articles: The Anatomy of Web Fonts and Eight Definitive Font Stacks. Basically it is ok to change the font as long as you choose fonts that are available to your users and are readable. It's very normal to do this and allows your website to be more appealing and even more usable if done properly.



Only top voted, non community-wiki answers of a minimum length are eligible