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
0
votes
2 answers

Squished Text On Website

I am using a google web font on a site and am getting some users reporting very squished unreadable text throughout the entire site. I am unable to see this any browser or computer I use, so I am not sure what could be causing this. Here is a…
RandyLahey
  • 979
  • 4
  • 10
  • 26
0
votes
2 answers

Google fonts not displaying all the time

I'm using the import thing in my CSS, like this @import url(http://fonts.googleapis.com/css?family=Kite+One); But the font doesn't load all the time. I'm still working on the CSS and refreshing periodically. Is it because of that? Is there any way…
Alex
  • 66,732
  • 177
  • 439
  • 641
0
votes
2 answers

Convert Hiragino-Sans-GB-W3 to others font format

I had this two fonts called -Hiragino-Sans-GB-W3.otf (12.5mb) -Hiragino-Sans-GB-W6.otf (12.6mb) but I had try many font convertor, they didn't support it because the font size too big. Is there any way to make it convert to others format? Thanks.
user2640505
  • 63
  • 5
0
votes
1 answer

Language Reference, Font-family

There are three basic languages used on my website. I put lang="en" in html tag. In the CSS file I write the following: body { ... font-family: 'Open Sans'; font-size: 10pt; ... } So, if the text on the website is in English either Russian it…
gasparean
  • 23
  • 1
  • 2
  • 6
0
votes
3 answers

What is the best practice in adjusting CSS to compensate for the padding at the bottom that is added by the font?

I was trying to figure out why the page title looked uneven at the bottom. I made the containing element #pageTitle { background-color: rgba(6, 6, 6, 0.85); margin:0; padding: 0 12px; width: 100%; } and the h1 #pageTitle h1 { …
JGallardo
  • 11,074
  • 10
  • 82
  • 96
0
votes
1 answer

Webfont on mobile - Targeting certain h1,h2's but not other elements

Background I am expecting that, the webfonts used on my site would work on mobile devices exactly as they are on desktop. This is, working as expected on desktop. CSS @font-face { font-family: 'sdFont'; src: …
Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
0
votes
2 answers

"Font_Glyph_Outline" Error when using WebFonts with DOMPDF

I'm trying to implement DOMPDF, everything is working (thanks to multiple Stack users) but I'm now having trouble rendering WebFonts when. According to the examples on the Google Code project for DOMPDF it is possible to use…
Deej
  • 105
  • 1
  • 1
  • 9
0
votes
0 answers

How to overcome slow download of google webfonts

I use google webfonts in my website. Unfortunately, it's Korean language and the font files are bigger than English. It's just one font-family but 3 files are downloaded (normal, bold, extra-bold). Each file is about 9MB. When you first visit the…
Sam Kong
  • 5,472
  • 8
  • 51
  • 87
0
votes
1 answer

CSS Compression does not display @font-face

So everything is fine with the following until I compress the css. @font-face { font-family: 'modern_pictogramsnormal'; src: url('modernpics-webfont.eot'); src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'), …
user1431083
  • 177
  • 1
  • 15
0
votes
1 answer

Change font styles wrt @font-face support

I know that most of the "modern" browsers supports @font-face in CSS. But there may be some exceptions. I would like to know if it is possible to change font size of some selector based on @font-face browser support. ie, I would like to set…
Alfred
  • 21,058
  • 61
  • 167
  • 249
0
votes
2 answers

How do I prevent different browsers from adding more width to words via @font-face?

See images: Firefox on Mac: Firefox on Chrome: On chrome you can see that the same font using the same styling takes more room. What can I do so that all browsers will render the font the same way rather than adding more width to it? I am using a…
starbucks
  • 2,926
  • 9
  • 41
  • 53
0
votes
0 answers

Chrome uses a different baseline for my webfonts

I am using a font family from MyFonts.com and I include it like they have in their example css: @import url("//hello.myfonts.net/count/xxxxxx"); @font-face { font-family: 'URWGroteskNarrow'; src: url('fonts/XXXXXX_1_0.eot'); src:…
Dehalion
  • 757
  • 1
  • 7
  • 16
0
votes
1 answer

@font-face not working for my ttf font in all browsers

I used ttf font for my website using @font-face in css like this @font-face { font-family: myFirstFont; src: url('tamil.ttf'); } .tlan { font-family: myFirstFont; color:#039; } tamil.ttf is not english language font. I can't able to solve…
hserusv
  • 976
  • 1
  • 7
  • 17
0
votes
1 answer

WebFont shows uppercase or lowercase in different browser

All, I found for the same font css of an element , The font shows uppercase in some browser, but lowercase in others. I inspect the element in the firebug . But didn't found any css attributes make it .I don't know which css attribute I should…
Joe.wang
  • 11,537
  • 25
  • 103
  • 180
0
votes
1 answer

Using TypeKit's WebFontLoader for Canvas text

I'm having a hard time using fonts loaded via the TypeKit webfontloader as font faces for text that is drawn on a canvas element. I boiled it down to the following test case: WebFont.load({ google: { families: ['Droid Sans', 'Droid…
m90
  • 11,434
  • 13
  • 62
  • 112
1 2 3
…
99 100