FAQ Database Discussion Community


Font rendering fine on Mac, messed up on Windows

windows,rendering,webfonts
I ran into a problem with font rendering on Windows. I'm used to a little difference in rendering between Mac and Windows, but this just made my mouth fall open. I tested the site thoroughly on Mac and I'm positive it looks just fine in Chrome, Firefox and Safari. It...

Different webfont for Japanese special characters

html,css,web,fonts,webfonts
I'm working on a Japanese website and I'm using the Meiryo webfont. I really like this font but the special characters have too much margin. The exact issue is that there's too much space in front of special characters like 【, which makes the design look off if such a...

Is there any way to ensure that icon fonts always load on IE 8?

internet-explorer-8,icons,webfonts,icon-fonts,fontello
I've been trying all day to get custom icon fonts to work in IE 8 (for example, with Fontello or Icomoon). Both Fontello and Icomoon offer "demo" pages of the icon font after you download it. I've been using the demo pages to test. As far as platform, I've been...

How to make a font looking very old and out-washed in the browser

html,css,fonts,webfonts,handwriting
I would like to create random outwashed letters of a usual font. Let's say I want to have http://www.fontspace.com/category/washed%20out those ones but instead I use a usual font which is out-washed in the browser. Is this possible? I mean taking a font that is out washed there the same letters...

External web font via redirect

css,redirect,cross-domain,webfonts
When trying to use a font file from another domain on a web page, I ran into the restrictions of the Cross Origin Resource Policy in all its glory. So, instead of referencing the external font URL directly from CSS with @font-face, I referenced a local URL path which redirects...

Why won't my @Font-Faces load?

css,css3,font-face,webfonts,fontfamily
My fonts won't appear on my website and I don't know why! The only reason I could really think of is that perhaps I was loading in too many? However, I tried removing a load of them and this did not appear the case. Any ideas? The code... #panel1 h1...

How to set lining numerals in a webfont?

css,webfonts
I've been integrating with a webfont in Brackets (eot, ttf, woff) and can't seem to get right of the old style numerals using .lnum { -moz-font-feature-settings:"lnum" 1; -moz-font-feature-settings:"lnum=1"; -ms-font-feature-settings:"lnum" 1; -o-font-feature-settings:"lnum" 1; -webkit-font-feature-settings:"lnum" 1; font-feature-settings:"lnum" 1; } I'm starting to wonder if the font I'm using even has normal numerals...

Google fonts: Define custom name in CSS

css,fonts,font-face,webfonts,google-font-api
Is it possible to define a custom name for Google fonts? Eg. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> How to use 'Open Sans' with custom name? div { font-family: 'custom'; // to be same as 'Open Sans' } Using @font-face as answered here is not possible, since I don't have url to...

Avoid Symbols in Google font

fonts,webfonts,google-webfonts
I added fonts from google fonts, but they appear in web page as symbols! I tested in chrome,and FireFox Example image: ...

How to insert font icon into text input field? [closed]

html,css,webfonts
I want to insert a calendar icon web font into my input field. The code I have doesn't work. "webfont_calendar" is my web font class. Am I missing something? <input class="webfont_calendar start_date" id="from"/> ...

loading cached fonts at the right time

javascript,fonts,webfonts,webfont-loader
I have some webfonts that get loaded via Webfontloader load like this ... <script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script> <script> WebFont.load({ custom: { families: ['BlenderProBook', 'BlenderProMedium'] } }); </script> And it works great when first loading the page ... Problems is, when refreshing the page it only retrieves the cached fonts when requested in...

Webfonts not rendering on IE11 win8.1

windows-8.1,internet-explorer-11,webfonts
I have a weird problem with webfonts rendering on IE11 (v11.0.9600.17631) windows 8.1 pro. I am using both an iconmoon produced iconset and 2 typekit fonts (proxima nova and rooney) and nothing is rendered using these. I have tried so many things but nothing seems to do the job. Tried...

What do browser do when a font weight is unavailable

css,fonts,cross-browser,webfonts,weight
If I load a google font that comes with 400 and 700 weights, but in my CSS I use font-weight:550; what does the browser do ?

roboto font not working in css

css,xhtml,font-face,webfonts,google-webfonts
I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder. In my XHTML i mentioned the CSS Path, '<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />' AND my CSS file have styles like, @font-face { font-family:roboto-bold; src: url('../fonts/Roboto-Bold.tff') @ttf; } .UX_FontClass { font-family: roboto-bolditalic !important;...

Numbers look different in Safari on iPhone

html5,css3,webfonts
I have a simple snippet with a phone number composed by a one letter and 12 numbers, its a simple text inside a p element, In a desktop browser all looks fine, but in an iPhone browser the letter p looks fine but the rest of the number looks very...

Not able to use custom fonts in Phonegap

android,css,cordova,webfonts
After looking at various solutions, like this one, I'm still not able to get Elusive Icons working in Phonegap. It's working fine on my computer, but once I create the app using Adobe app builder, the web font icons are no longer showing. My folder structure looks like this: and...

Using Telugu ttf in my web site

css,css3,svg,webfonts,true-type-fonts
I need to be able to use specific Telugu fonts on my website. I have the ttf file and I generated the .eot, .woff, .woff2 and .svg files required. I followed the instructions on the site below and created my stylesheet as shown below @font-face { font-family: 'sree_krushnadevarayaregular'; src: url('Sree...

Google Font letters scramble up sometimes on refresh only in localhost

html,css,fonts,webfonts,google-font-api
We have a strange problem with Google Fonts while developing via localhost. On random refresh the letters of text scramble up. This happens about once every 5 refreshes. The images below show the letters scrambled up and the way they're supposed to be shown. Also, while the letters are scrambled...