Locally Host Google Material Icons

[kel322]

Hello,
We have a large HTML5 help file where we use a couple of Google's material icons in our project (https://fonts.google.com/icons). It was really easy to set up as in @import from google on our stylesheet.

We have come to learn that if you are offline, the import link really slows down the loading of the page, and additionally, we don't necessarily want to rely on an online resource since we have users who do not always have online access (our html package gets shipped with our product, so users don't have to access our live website).

I have attempted to follows instructions on google and stackflow to host the icons locally. It seems like it should be pretty straightforward, but I cannot get it to work. Has anyone successfully done this, and if so, would you be willing to share your process?

Much thanks!
Kelly

[NorthEast]

You haven't said what you've tried, so perhaps give an example of how you are trying to set up the font.

In your CSS you will need to add one or more @font-face statements that point to the local font files.

I use something similar to the 'slightly deeper browser (s)upport' approach on CSS tricks (I link to WOFF and TTF files): https://css-tricks.com/snippets/css/usi ... ser-upport

Code: Select all

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype');
}

Things can get more complex when you need to support different font weights (e.g. bold) and font styles (e.g. italic). Some fonts contain all the weights and styles in a single font file, but some fonts have each weight and style as individual files.

For example, here you have the same font-family name 'MyWebFont', but you can point to different files depending on whether that font is used in a regular weight (font-weight: 400) or a bold weight (font-weight: 700).

Code: Select all

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype');
  font-weight: 400; 
}

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont-Bold.woff') format('woff'), url('myfont-Bold.ttf') format('truetype');
  font-weight: 700;
}

When you set up and test this, it's important not to install the font (e.g. TTF) in Windows, as the browser will use a Windows font with the same name instead of the web font. So it'll alwats appear to work on your PC, regardless of whether the web font is actually working.

[kel322]

Thank you so much! I ended up giving it one more try, following the instructions on the google web font page and deleting everything I had previously done. And this time, I got it to work.

I downloaded the font files that I needed, added them to the Fonts folder, and included the following near the top of our stylesheet where we have other embedded font calls:

Code: Select all

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../Fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../Fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(../Fonts/MaterialIcons-Regular.woff) format('woff'),
    url(../Fonts/MaterialIcons-Regular.ttf) format('truetype');
}

Within our stylesheet we have a style attached to the icon and call the specific icon within the style:

Code: Select all

.clipboard
{
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; 
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
 color: #3A4EA1;
 background-color: transparent;
 border-style: none;
 vertical-align: middle;

  /* 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';
}

.clipboard::before
{
	content: " link";
}

Our html looks like this:

Code: Select all

<button class="clipboard" data-title="Click to copy a link to this section."> </button>