Stack Overflow
Stack Overflow

Questions tagged [webfonts]

Technology that enables people to use fonts on demand over the Web without requiring installation in the operating system.

What are WebFonts?

WebFonts are a technology that enable people to use fonts on demand over the Web without requiring installation in the operating system. The W3C working group has introduced webfonts as part of the CSS 2 specification, and addendums are included in CSS 3. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. Modern browsers support the now widely used format (and woff2 for better compression). In the past other formats like eot (initial proprietary Microsoft), ttf (uncompressed) or svg were used.

Links

1549 questions
381
votes
3 answers

Why should we include ttf, eot, woff, svg,... in a font-face

In CSS3 font-face, there are multiple font types included like ttf, eot, woff, svg and cff. Why should we use all of these types? If they are special to different browsers, why is the number of them greater than the number of the major web browsers?
user16948
  • 4,801
  • 10
  • 30
  • 41
286
votes
6 answers

Including Google Fonts link or import?

What is the preferred way of including Google Fonts on a page? Via the tag
kajo
  • 5,631
  • 4
  • 31
  • 29
196
votes
6 answers

How do I install a custom font on an HTML site

I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout. "KG June Bug" I have it downloaded locally - is there a simple CSS trick to accomplish this?
adam
  • 2,830
  • 5
  • 31
  • 37
156
votes
7 answers

Add custom icons to font awesome

I love the Font Awesome icon font and want to use it for most of the icons on my site but there are a few custom svg icons that I'd need in addition to what's offered. I noticed that the .svg version of Font Awesome is composed mostly of these…
Christian Schlensker
  • 21,708
  • 19
  • 73
  • 121
115
votes
6 answers

Webfonts or Locally loaded fonts?

Ever since the troubles brought on by using Cufon I ventured away from using external font resources, but as of late, I have been looking for alternate methods of loading fonts to see if there's a better way; better methods have a way of just…
darcher
  • 3,052
  • 3
  • 24
  • 29
114
votes
8 answers

Webfont Smoothing and Antialiasing in Firefox and Opera

I have custom-made web fonts used on my site. To style my rendering output, I used the following code: //-webkit-text-stroke-width: .05px; //-webkit-text-stroke-color: white; -webkit-font-smoothing: antialiased; This works fine on Safari and Chrome…
matt
  • 42,713
  • 103
  • 264
  • 397
108
votes
11 answers

How to use web-fonts legally?

I'm a bit confused about the laws applied to web fonts. I know that it's OK to use fonts like Arial, Times Romans, Georgia, etc...I think it's illegal to use other commercial fonts. Are there websites that provide free fonts? If there are. Can I…
alexchenco
  • 53,565
  • 76
  • 241
  • 413
103
votes
5 answers

Converting and rendering web fonts to base64 - keep original look

I want to defer font loading on my site inspired by deferred font loading logic for Smashing Magazine. Main part of this is converting fonts to base64 and preparing your CSS file. My steps so far: Pick fonts on Google Web Fonts and download…
Jan Peša
  • 6,760
  • 4
  • 27
  • 32
99
votes
6 answers

How to be notified once a web font has loaded

Google's Web Fonts API offers a way to define callback functions to be executed if a font has finished loading, or couldn't be loaded etc. Is there a way to achieve something similar using CSS3 web fonts (@font-face)?
Daniel Wagner
  • 2,717
  • 1
  • 21
  • 14
99
votes
3 answers

Use multiple @font-face rules in CSS

How can I use more than @font-face rule in my CSS? I've inserted this into my stylesheet: body { background: #fff url(../images/body-bg-corporate.gif) repeat-x; padding-bottom: 10px; font-family: 'GestaRegular', Arial, Helvetica,…
Tim
  • 2,589
  • 6
  • 34
  • 39
91
votes
1 answer

Languages supported by "latin" vs "latin-extended" glyphs in fonts on Google Web Fonts?

Some fonts on Google Web Fonts support multiple "character sets". The thing is, if the web font I use only serves the "latin" glyphs, users who translate the page to a language whose glyphs aren't supported will clearly notice the messed up…
its_me
  • 10,998
  • 25
  • 82
  • 130
88
votes
4 answers

Vertical alignment of text and icon in button

I'm having trouble vertically aligning a font-awesome icon with text within a button under the Bootstrap framework. I've tried so many things including setting the line-height, but nothing is working.
74
votes
4 answers

How does ?#iefix solve web fonts loading in IE6-IE8?

Lots of articles in the web like this : http://www.fontspring.com/blog/fixing-ie9-font-face-problems suggest to add a ?#iefixto the eot url. I was curious to know how is this going to solve the problem. Thanks.
vine'th
  • 4,890
  • 2
  • 27
  • 27
74
votes
8 answers

How to include Roboto font in webpack build for Material UI?

For a progressive web app based on Material UI (React) and built with Webpack, how do I properly include Roboto font(s) so that the app does not depend on Google servers and fonts also work offline ? The installation page just references the Google…
Udo G
  • 12,572
  • 13
  • 56
  • 89
67
votes
13 answers

IE9 blocks download of cross-origin web font

This is driving me crazy. Just testing a site on IE9 and discovered that the 'live' version is rendering a web font I am using smaller than on the dev version. Here is a selection of screen grabs: I am using the Font Squirrel @font-face kit. As…
user159895
1
2 3
…
99 100