I'm trying to host the Google Material Design icon set for my website however I cannot get the icons to show in Chrome or Safari.
I'm using this CSS file:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(/public/dist/font/Material-Design-Icons.eot); /* For IE6-8 */
src: url(/public/dist/font/Material-Design-Icons.woff2) format('woff2'),
url(/public/dist/font/Material-Design-Icons.woff) format('woff'),
url(/public/dist/font/Material-Design-Icons.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Pulling in the file with:
link(rel="stylesheet", href="/public/dist/css/font.css")
Which I can see in the browser is loaded
The font itself is even loaded into the page, I can see the .woff file in the network tab on Chrome.
This is the public folder structure which is hosted 'as is' by the server
I'm using the font here (jade):
i.material-icons.prefix perm_identity
And I can see the CSS class above applied to that element
But the fonts don't render.
EDIT: People here having the same issue: https://github.com/google/material-design-icons/issues/205
This was caused by outdated icon fonts on the materializecss.com website, I used the ones off the Google GH repo and they worked sigh
Simply make use of google material design icons directly in your webpage.
You can find the details here https://google.github.io/material-design-icons/
I was able to fix this issue by using the google web font style sheet. It is much easier this way.. you can just include the style sheets in you webpage and all web font icon classes are loaded and you are good to go.
Simply add the below CSS link to your page and access material design icons by Google web fonts.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
And specify icon you want to use.
<span class="material-icons">face</span>
For more details refer to the Material icon documentation
Related
After googling several hours, I still cannot have custom fonts displayed in PDF generated by Odoo. Help much appreciated, please! Here is the complete story.
I created a custom report inheriting account.report_invoice_document. This is needed as invoices are customized to display extra information (like a Harmonized System Codes summary, for example). I was also asked to use a custom font to customize the layout of our invoices.
In this template, I added an inline style sheet and applied a font-face to the whole document:
<style>
#font-face {
font-family: 'My Font';
font-weight: normal;
font-style: normal;
src: url(data:font/opentype;charset=utf-8;base64,d09GRg<!--[ LONG BASE64 STRING ]-->DN6ag4) format('woff'),
url(data:font/truetype;charset=utf-8;base64,AAEAAA<!--[ LONG BASE64 STRING ]-->moOA==) format('truetype');
}
html, body
{
font-size: 8;
font-family: 'My Font';
}
</style>
Tuning the Invoices report to produce HTML, I'm able to get the expected results on screen in my browser (given the font is not installed on my computer running the browser). Pressing the Print button export the same report as a PDF file through wkhtmltopdf I get my invoice with the correct data, but not the right font family nor size.
Things I tested, without success:
use only WOFF
use only TTF
use both WOFF and TTF
direct PDF generation without primarily HTML display on screen
add a .mytest class in style an apply it to specific html tags
Still the same: OK on screen, not as expected as PDF file.
For experimentation, also tried to include Material Icon as follow:
<style>
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('data:font/truetype;charset=utf-8;base64,AAEA<!--[ LONG BASE64 STRING ]-->ABc=') format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
</style>
and later adding this somewhere in the template.
<span>TEST <i class="material-icons"></i></span>
Same as above: works well on screen and displays "TEST" + a smiling face icon, works partially on PDF and only displays TEST without the face icon.
I'm stuck there. Could someone help?
Thanks.
I am trying to use Google Material Icons in an electron app and ran across an issue in rendering the icons. The icons render perfectly on Windows but not on OSX. Using devtools I have seen that both request the font as 'woff2' format successfully but only Windows appears to render the icon...OSX simply list the ligature text.
Windows (left), OSX (right)
These works in Windows build but not OSX...it simply lists home or
<i class="material-icons">home</i>
<i class="material-icons"></i>
I have also tried
<i class="material-icons" id="test"></i>
#test:after{ content: 'home' }
Not sure if this an issue with chromium build for OSX, a OS font issue, or what? If anyone could provide any guidance on some things to try I would really appreciate the help.
Here is the CSS being used
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./fonts/Material-Design-Iconic-Font.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(./fonts/Material-Design-Iconic-Font.woff2) format('woff2'),
url(./fonts/Material-Design-Iconic-Font.woff) format('woff'),
url(./fonts/Material-Design-Iconic-Font.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
So, I am not 100% sure on what the issue is but wanted to post an update if it could help anyone else.
On my Windows build I had a font installed MaterialIcons-Regular.ttf...once I copied it and then uninstalled it, the Windows app stopped rendering correctly.
I then copied the MaterialIcons-Regular.ttf to the fonts folder in my electron project and then updated my css to look like
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(fonts/MaterialIcons-Regular.ttf) format('truetype');
}
Now it seems to be working...Not sure if there was something wrong with the other font sets or if I have some css setup incorrectly.
I am trying to add google material-icons to my WordPress project locally currently on localhost using WAMP. With CDN, everything works perfectly but I want a static reference to icons.
Here is is my directory structure
/
-index.php
-css/
----style.min.css
----MaterialIcons-Regular.eot
----MaterialIcons-Regular.ttf
----MaterialIcons-Regular.woff
----MaterialIcons-Regular.woff2
In style.min.css I have:
.material-icons{
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff'),
url(MaterialIcons-Regular.ttf) format('truetype');
}
When I use icons in body as:
<i class="material-icons"></i>
The icons render just fine in chrome but not in firefox;
FireBug shows this error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource athttp://192.168.0.8/wp/wp-content/themes/thediode/css/MaterialIcons-Regular.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
192.168.0.8/wp is the root set in WordPress backend on localhost so that images and other resources are fetched properly and I guess this is the problem.
Any ideas?
will this work when live?
In your URL bar in FF go to about:config. Find security.fileuri.strict_origin_policy and set it to false.
OR
Might be a file path issue. Try adding a slash:
url("/MaterialIcons-Regular.woff2")
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
https://lh.rs/8M9Q7EvRBapv
And here's my version :
https://lh.rs/Lbini5YbQZlX
Any ideas?
It's important to note that using custom fonts are not pixel perfect on all browsers since all browsers tend to render the fonts differently. Another issue can be people not enabling ClearType within windows which I'm sure in this case its not but for other readers I decided to include this information.
It would seem that your font support is pretty limited since you are only using .ttf and .eot - for maximum compatibly and limiting render issues it's best to use 'ALL' 5 font types which are:
ttf (TrueType Font)
oft (Adobe/Microsoft Open Font Type, AKA OpenType)
eot (Embedded OpenType)
woff (Web Open Font Format)
svg (Scalable Vector Graphics)
Ideally you want to use SVG as much as you can since this provides the best quality, SVG is supported in modern versions of Andriod Browser, Firefix, Safari, Opera, Chrome but not in IE.
Personally I'd convert the fonts to all these file types and see if the outcome improves, browsers will automatically use their preferred font type. You can use Font 2 Web to convert to the other formats, its important to note that fonts are copyrighted and your client will require licensing, some fonts don't even allow web use.
I know there are browser rendering inconsistencies between Chrome and Firefox (Windows, both). But I am seeing a weird bug involving #font-face & gooogle-fonts shifting the font down about 10px in Chrome.
Here is an image to illustrate the problem. I have highlighted the text so that you can see the shift:
Here is the CSS for clarity:
.primary-menu li a,
.primary-menu li a:visited {
display: block;
text-decoration: none;
text-transform: uppercase;
color: white;
font-family: 'Oswald', sans-serif;
font-weight: 700;
padding-right: 0;
transition: padding-right .5s;
}
I am using Google Fonts for the Oswald type face:
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Oswald:400,700' type='text/css'>
I am using a CSS reset, so most properties are set to a default value. I have tried fiddling with the CSS to see if I can analyse why it is shifting, but I can not see an effect other than turning off the font-face.
Here is the source site for reference. Concept Design Ltd
Any knowledge on why this is happening would be fantastic.
Many thanks,
Neil
I recently had the same problem, but my font was NOT locally installed. (By the way, that would be a problem in web design, as you cant control the installed fonts on pageviewer´s computer).
The problem only occurred in Chrome 26 on Windows, and later in Firefox 19 for Windows but not on any other browser (neither Windows nor Mac OS x).
I finally found out that Chrome/Win would only render SVG Font correctly and Firefox took WOFF unhinted.
So I dirty-fixed the uncorrectly-rendered down-shifting with this-like CSS-code
/* for all browsers */
#font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#wf') format('svg');
}
/* for all webkit-browsers (Chrome, Safari and newly Opera */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'myfont';
src: url('myfont.svg#wf') format('svg');
}
}
/* for all mozilla-browsers (Firefox) */
#-moz-document url-prefix() {
#font-face {
font-family: 'myfont';
src: url('myfont_unhinted.woff') format('woff');
}
}
Hope this helps anyone.
I was having the same issue, but in FireFox - I removed the Oswald fonts I had in my font directory on my computer and it fixed the issue. Maybe give that a go?