Hot answers tagged

23

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'), ...


14

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: <dict&...


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 Arial ...


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. (This is ...


12

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 policies, ...


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

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 ...


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 ...


7

It turns out I had a desktop version of the "Open Sans Light" font installed in my Windows machine. After reading this thread: Issue 340: Open Sans 400 is showing as condensed light in Chrome and uninstalling the font, the issue went away.


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 the ...


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

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

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 view)...


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

You seem to be confusing "free font" with some sketchy site allowing you to download [something] for free. This is like assuming some music album is free because you found a torrent for it. If you want to know if Monotype's Gill Sans is free, then you ask Monotype, not "FontPalace." It's very much not. If you want to use Monotype fonts for web embedding, ...


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

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 ...


4

Try FontFonter.


4

This seems to be a bug that just crept in into the W3C CSS Validator. It has been reported on the validator’s discussion list: http://lists.w3.org/Archives/Public/www-validator-css/2012May/0003.html Recently, there have been bugs especially in font-related CSS rules in the validator, since its code has been renewed and some cases were not dealt with ...


4

You need to convert the "Arimo" font to a web-font with a converter like http://www.fontsquirrel.com/fontface/generator. Your CSS references the Arimo font. Since the font is not available via CSS, it's attempting to load it locally. Most people won't have Arimo installed, so will see a default font instead.


4

@import in-and-of itself is slow. You shouldn't be using unless absolutely necessary and in this case I don't think it is. Just create a second <link> element to the style sheet with the font rules or include them in styles.css. Unused font that needs to be downloaded will not be downloaded so declaring them but never using them will not hurt ...


4

This is a known issue with Raleway and some versions of Chrome, it's related to anti-aliasing of fonts. This is a fix for windows, using SVG in the css /*FIX FONT FOR GOOGLE CHROME ON WINDOWS*/ @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'MyFont'; src: url('fonts/myfont.svg#myfont') format('svg'); font-weight:...


4

From what I understand, the ability to use fonts on websites is at the discretion of the font's license. For some licenses you are able to modify fonts whilst also being able to redistribute them, hence why for some fonts on Font Squirrel they offer a Webfont Kit allowing you to download a variety of fonts. To make things a little easier if we take a font ...


4

Well this is already done as best it can by default. When you try to access fonts from another domain your browser will block this s a cross origin request (unless you explicitly add a "Access-Control-Allow-Origin" header in your htaccess file). Try it from a development server and you'll see what I mean as you'll get errors in the Console log of the ...


4

You can literality use any font you choose regardless whether or not they have the font installed on their OS. This is done by using CSS @font-face which informs the users browser to download the font to their device. However the font needs to be served as multiple compatible web font formats because different operating systems use different formats. This ...


4

Ok here is how it should work. The CSS @font-face { font-family: "BellGothicStd"; src: url("fonts/BellGothicStd-Black.otf") format("opentype"); } h1 { font-family: 'BellGothicStd', Arial, sans-serif; font-weight:normal; font-style:normal; } The HTML <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="...


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