My site: http://www.getmpango.com
I'm using two font icons, font awesome and ligature symbols.
When I load the site at startup with no cache, the icons don't load - both of them. If I reload the home page they don't change either but if I load any other page, then they all load.
I have linked them correctly since they are loading on other pages, I just can't understand why they don't show at startup (no cache).
EDIT
This is how it looks on first load:
Notice the green boxes - that's ligature symbols icon font.
The red boxes are font-awesome icon font.
This is how it's supposed to look - or looks after another page loads.
Related
I have a web page with text and an image. I want to place the text very precisely over the image.
I have discovered that with the font I am using, when viewing the page on windows, everything gets shifted down by about 4px. On Mac, iphone and android, it is placed correctly.
This does not happen if I use Courier New as the font, so I know that the problem is the font, however I have no choice but to use this font.
Is there a way to compensate for this purely in CSS, or do I need a javascript callback to detect windows and add a class so I can deal with it?
first of all, I would try tuning ling height, if that did not work, then I think you need to edit the font itself, you can do that using this site: https://transfonter.org/, uploading your font file and convert it to the formats you use and the important point is to check this toggle button, it adjusts some properties in the font so it has similar experience on different operating systems
if that did not work, there is a program called fontforge it gives you the ability to change font metrics, for more info you could check this question
Font Rendering / Line-Height Issue on Mac/PC (outside of element)
Created a font-icons with material svg and custom svg files using gulp-iconfont-css. Sometimes these font-icons are not appearing with the correct icon they are actually jumbled and on refresh, all icons are arranged properly on the site.
why is it happening like this and how to solve this?
Is there a way to hide font awesome icons if they can't load the font for whatever reason?
When my site is loaded in an <iframe> all the icons are displayed as squares.
Presumably there is some kind of cross-site security reason for this - but can I make a script to hide the icons instead of displaying the ugly squares that it shows in place of the icons?
I am using this font icon set that I made with the icomoon font generator: http://bbmthemes.com/work/icons70897/
On my development install: http://bbmthemes.com/themes/smart/full-width-page/
..the font is displaying the correct icons that I want in each place, for example if you use firebug to inspect the search glass icon in the top right and enter this into the div.search..
..you will see that it matches the magnifying glass icon that is already there, as well as matching up to the magnifying glass icon marked as..
..on the font demo link above.
However, on the live version: http://www.bbmthemes.com/themes/modular/?page_id=2
..that I just installed the codes are all showing the icon previous to the number that is supposed to be displayed. So for example, the code is exactly the same to display that search magnifying glass:
..but it displays an audio icon which in the font demo is marked as..
I have no idea how or why this is happening. Does anyone have any idea?
EDIT Is this fixed? A friend told me he sees the magnifying glass on both but mine still shows the audio icon on the second. I can't tell if its just the cache not updating. Do you see a magnifying glass on both links?
Got a question for the font named Rockwell Std Light. I used in Photoshop to show the white text with blue background, and also did the same thing in Dreamweaver. However, the font always looks thicker in the web page. Does anyone have idea what issue may be here? The web page is just very basic DIV and CSS background color setting.
Thank you in advance.
Picture-Compare with Photoshop & Dreamweaver
As #joakimdahlstrom said different applications render fonts differently, Photoshop also has additional effects such as smoothing etc.
In general however, you should not use a font such as Rockwell Std Light on a web page as it isn't a "web safe font" i.e. not everyone has this font installed on their system so those that don't won't see it. See http://www.w3schools.com/css/css_websafe_fonts.asp for some common ones.
You have a few options for non-standard fonts if you want cross-browser / system compatibility:
Save the text as an image in Photoshop and include it in your web page as an image (making sure to specify the alt text)
Use a service such as TypeKit
TypeKit doesn't have the Rockwell font, so you'd be better going down the image route if you definitely want to use that font.
Applications, operating systems etc. render fonts differently. There's nothing you can do about it.