I have Chrome Packaged App written in AngularDart and trying to get some external icons to make the app look nicer, but couldn't find any example over the net. Tried many things along with the below workaround but couldn't get it working. I am adding the #font-face to my css as below :
#font-face {
font-family: 'Icons';
src: url(data:font/ttf;charset=utf-8;base64,<ttf file encoded to base64>) format('truetype'),
url(data:font/woff;charset=utf-8;base64,<woff file encoded to base64>) format('woff'),
url(data:font/svg;charset=utf-8;base64,<svg file encoded to base64>) format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-uniF085:before {
content: "\f085";
}
I am trying to avoid CSP (content security policy) issues by converting my icon files: .ttf, .woff, .svg, .eot to base64 and embedding them into my controller CSS but when I run the application all I see in the chromium is the default square box instead of the icon I am referencing (); no error on the console or on the chromium browser. I am wondering if anyone got custom or external icons / fonts working with the Chrome Packaged apps. Please let me know if there is a workaround in anyway.
well after some tries, I see the issue here is not embedding the the files into the component, but actually getting the font-face work inside the shadowDOM which doesn't seem to happen, once I disable shadowDOM for my component it can use the global styles and the icons work fine as base64 encoded, but off course disabling shadowDOM masses up the whole component page design which I would need to refactor. I still think there should be a way to use font-face in shadowDOM.
Try the IcoMoon https://icomoon.io/app/
Once you import your icons, it will generate CSS files with the fonts embedded (off by default, change in preferences)
Worked well for me
Related
So, I am confused by this:
#font-face {
font-family:'rift';
src: url('../vendor/fonts/Fort Foundry - Rift-Bold.otf') format('otf');
font-style: 'normal';
font-weight: '700';
}
It lives in public/vendor/fonts/ and whats confusing is that unless I physically install the font - the font doesn't render properly.
I thought the whole aspect of using custom fonts was that the end user did not have to have them installed on their machine, that it should just work. Am I missing something when it comes to using custom fonts in css?
I get no errors in the console with or with out the font installed. Is there a way to verify that it is actually working? Or is that why we have things like fallbacks?
.site-name{
color: #fff;
font-size: 22px;
font-family: rift, sans-serif; // Fallbacks
}
Can some one explain the concept of using custom fonts and if I am setting it up properly in css? From a Laravel perspective.
You can host the font files on your server, to make use of a custom font on your site. Visitors are not required to have the font installed on their machine.
Make sure to choose a file name without spaces and special chars. You'll need to offer different formats of the font (like .eot, .woff2,...) to make it work across the different browsers and operating systems. Otherwise, the fallback font (in your case sans-serif) will be used.
Check out the article Using #font-face on CSS-Tricks. This is how your CSS could look like:
#font-face {
font-family: 'rift';
font-style: 'normal';
font-weight: '700';
src: url('../vendor/fonts/fort-foundry.eot'); /* IE9 Compat Modes */
src: url('../vendor/fonts/fort-foundry.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../vendor/fonts/fort-foundry.woff2') format('woff2'), /* Super Modern Browsers */
url('../vendor/fonts/fort-foundry.woff') format('woff'), /* Pretty Modern Browsers */
url('../vendor/fonts/fort-foundry.ttf') format('truetype'), /* Safari, Android, iOS */
url('../vendor/fonts/fort-foundry.svg#FortFoundry') format('svg'); /* Legacy iOS */
}
Troubleshooting
Visit your site and open the Developer Tools. Go to the tab Console.
Reload the page and look out for errors to make sure that the path to your font files is correct. If it's not, there will be an error 404 visible in the logs.
I am having problems getting my Icomoon custom fonts to load within my website.
Screenshot of Inspected Icon
I'm assuming that the greyed out "returnflight" reference indicates that my font files are not sourced correctly. I do not understand why that would be the case considering my /css/ and my /fonts/ folders sit at the same level.
My File Structure
My Styles Within global.css
#font-face {
font-family: "returnflight";
src: url("../fonts/returnflight.woff?5h0ljc") format('woff');
}
.fa {
font-family: 'returnflight' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-auto-intelligence-01:before {
content: "\e900";
}
Any help would be greatly appreciated
EDIT
I have removed all src's within #font-face except for .woff as suggested, but still experiencing the issue.
Net Tab Error
Upon enabling the Net tab within firebug I am seeing the following error which could be unrelated but I'm not sure. I was just brought in on this project and it is a robust piece of software. This seems to be related to bootstrap.
That 403 error will do it. Looks like you are either loading fonts from a different server (sometimes even www -> no www will do it, depending on server configs), the font files/folder don't have the right permissions, or you have something in .htaccess that is blocking access to certain file types.
#font-face {
font-family: iconFont;
src: local(iconFont), url('fonts/iconFont.ttf') format('opentype');
}
The font file is not corrupt and installs fine in OSX etc. letting me preview it. But it won't render anything when I try to use it on a web page or even if I select it in illustrator it just switches to another font if I touch any key.
The font is for 'regular' and I have tried other options, but it won't work. Have tried typing with caps on/off etc. Using numpad, nothing. Have re-installed it and made sure there are no duplicates. It also won't work in Windows. Not sure if I need to change my css somehow or the fault lays with the font.
Here's a link to the font for anyone wanting to try. It's a bunch of metro icons. http://www2.zippyshare.com/v/23494573/file.html
Not sure if this will help, but this is the CSS I use, and it works fine. The webfonts directory is in the same directory as the css file, and includes three file types: .eot .ttf .woff
#font-face {
font-family: 'AvenirLT-Book';
src: url('webfonts/25EE2B_0_0.eot');
src: url('webfonts/25EE2B_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/25EE2B_0_0.woff') format('woff'), url('webfonts/25EE2B_0_0.ttf') format('truetype');
}
a typical class decleration:
.AvenirLT-Book {
font-family: AvenirLT-Book;
font-weight: normal;
font-style: normal;
}
perhaps you need to change the format to ('truetype') instead of ('opentype') ?
I'm using a custom icon-font using CSS3's #font-face and in older version of Google Chrome, only the unicodes are showing and are not being replace or rendered in my custom font, which shows the glyphs for those unicodes.
Here is the #font-face syntax that I am using:
#font-face{
font-family:'glyphs';
src:url('../fonts/glyphs.eot');
src:url('../fonts/glyphs.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphs.svg#glyphs') format('svg'),
url('../fonts/glyphs.woff') format('woff'),
url('../fonts/glyphs.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Any idea why the unicodes are showing and not the symbols that are part of the icon-font?
You're possibly running into unicode-range limitations. As described here you can define in a font-face declaration which Unicode characters are covered. It could very well be that older Chrome versions only replaced Latin characters by default. You should be able to fix this by adding this to your font-face declaration:
unicode-range: U+00-FFFF;
Having said that, it could very well be that you're only having a local issue. Check in your Chrome settings, under Advanced Settings, under Web Content click Customize Fonts, then at the bottom check the current setting for Encoding. Changing its value to "Unicode (UTF-8)" could solve the issue as well.
Try switching the orders of the fonts you are loading. Some browsers, even older version of chrome, load svg fonts in weird / incomplete ways.
Try:
#font-face{
font-family:'glyphs';
src:url('../fonts/glyphs.eot');
src:url('../fonts/glyphs.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphs.woff') format('woff'),
url('../fonts/glyphs.ttf') format('truetype');
url('../fonts/glyphs.svg#glyphs') format('svg'),
font-weight: normal;
font-style: normal;
}
I may be going out on a limb here, but is it possible that the document displaying the font either a) declares a character encoding other than UTF-8 / UTF-16 (or isn't explicitly declared) or b) the html document is saved in an encoding other than UTF-8 / UTF-16?
A very common problem causing websites to display characters incorrectly is having a different declared character encoding in the HTML than the encoding used to save the HTML document. Also, the use of characters that are part of either of these encodings can create issues.
You should post the HTML code as well for us to answer better. I'm assuming you are using data-icon attribute in HTML. In that case, you should add this code after your font-face css code.
[data-icon]:before {
font-family: 'glyphs';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
I've had some problems with relative paths, old browsers and font-face declarations in the past: you might want to try with a fixed path (/someFolderInRoot/fonts/glyphs.svg) or a relative path under the css file-path (fonts/glyphs.svg).
Does it all work in a newer version of Chrome and other browsers?
Chrome installs updates automatically for most users, so perhaps you're making the website backwards compatible for a version nobody uses.
This is a general issue, and it seems like there is a solution.
Problem is that web fonts shows choppy in chrome. The solution should be to move the .svg call before the .woff call. Explained here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome and here: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
Problem is, that I'm using google web fonts, and importing the font like this:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
And I dont know, and cannot find out, how to import it with the #font-face css tag instead of the above. I've tried, but got stuck since google only offers the font in ttf and not svg or woff.
Hope you can help.
You'll have to host the fonts yourself if you want to apply this fix.
Your Google Fonts link is a request for a stylesheet, that gets dynamically built based on the parameters you supply - and on browser detection. For your example link:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
If you actually make the request yourself using curl:
$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic
this is what gets sent back:
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 400;
src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 700;
src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 400;
src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 700;
src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
The simplest thing to do is to go back to Google Web Fonts, download the font in question by going here and clicking the download arrow.
Then you can use the suggested fix from here, referencing the font files you downloaded:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
Did you do a proper reset of all styles?
Your inconsistent rendering experience can be caused by the browser defaults.
A reset.css sets all Elements back to default-values, this way cross-browser inconsistencies are reduced. There are many examples for reset.css, one of the Most popular is meyerweb reset css.
Another way to reduce inconsistency is to use normalize.css.
The difference between the two approaches in short is, reset.css just resets all browser specific styles while normalize.css has a wider scope by creating cross-browser defaults.
Differences between both are explained here by the developer of normalize.css.
If all those links do not help make sure that you set the font-weight always right an import all necessary font-weights.
You can read about font weights here: http://css-tricks.com/watch-your-font-weight/
You should also apply this technique when you use normalize.ccs because it doesn't reset the font-weight as rest.css does.
Add this to your stylesheet for each element.
opacity: .99;
For example -
p, li {
opacity: .99;
}
I have no idea why this works but it did.