Permalink
Browse files

feature: Better font-integration via CSS

  • Loading branch information...
MikeMitterer committed Nov 3, 2015
1 parent 96291df commit 1bf8a4769855dbcc450e9f0142ba2ed0768216e4
@@ -3,13 +3,13 @@
font-style: normal;
font-weight: 400;
src: url(package-root("assets/fonts/material/") + 'MaterialIcons-Regular.eot'); /* For IE6-8 */
src: url('material/MaterialIcons-Regular.eot'); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(package-root("assets/fonts/material/") + 'MaterialIcons-Regular.woff2') format('woff2'),
url(package-root("assets/fonts/material/") + 'MaterialIcons-Regular.woff') format('woff'),
url(package-root("assets/fonts/material/") + 'MaterialIcons-Regular.ttf') format('truetype');
url('material/MaterialIcons-Regular.woff2') format('woff2'),
url('material/MaterialIcons-Regular.woff') format('woff'),
url('material/MaterialIcons-Regular.ttf') format('truetype');
}
@@ -0,0 +1,64 @@
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto-Regular'),
local('Roboto-Regular'),
url('roboto/Roboto-Regular.woff2') format('woff2'),
url('roboto/Roboto-Regular.woff') format('woff'),
url('roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 200;
src: local('Roboto-Thin'),
local('Roboto-Thin'),
url('roboto/Roboto-Thin.woff2') format('woff2'),
url('roboto/Roboto-Thin.woff') format('woff'),
url('roboto/Roboto-Thin.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto-Light'),
local('Roboto-Light'),
url('roboto/Roboto-Light.woff2') format('woff2'),
url('roboto/Roboto-Light.woff') format('woff'),
url('roboto/Roboto-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto-Medium'),
local('Roboto-Medium'),
url('roboto/Roboto-Medium.woff2') format('woff2'),
url('roboto/Roboto-Medium.woff') format('woff'),
url('roboto/Roboto-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto-Bold'),
local('Roboto-Bold'),
url('roboto/Roboto-Bold.woff2') format('woff2'),
url('roboto/Roboto-Bold.woff') format('woff'),
url('roboto/Roboto-Bold.ttf') format('truetype');
}
View
@@ -0,0 +1,85 @@
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url("material/MaterialIcons-Regular.eot");
/* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"), url("material/MaterialIcons-Regular.woff2") format("woff2"), url("material/MaterialIcons-Regular.woff") format("woff"), url("material/MaterialIcons-Regular.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;
/* 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. */
-webkit-font-feature-settings: 'liga';
-moz-font-feature-settings: 'liga';
font-feature-settings: 'liga'; }
.material-icons.md-18 {
font-size: 18px; }
.material-icons.md-24 {
font-size: 24px; }
.material-icons.md-36 {
font-size: 36px; }
.material-icons.md-48 {
font-size: 48px; }
.material-icons.md-dark {
color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive {
color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light {
color: white; }
.material-icons.md-light.md-inactive {
color: rgba(255, 255, 255, 0.3); }
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local("Roboto-Regular"), local("Roboto-Regular"), url("roboto/Roboto-Regular.woff2") format("woff2"), url("roboto/Roboto-Regular.woff") format("woff"), url("roboto/Roboto-Regular.ttf") format("truetype"); }
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 200;
src: local("Roboto-Thin"), local("Roboto-Thin"), url("roboto/Roboto-Thin.woff2") format("woff2"), url("roboto/Roboto-Thin.woff") format("woff"), url("roboto/Roboto-Thin.ttf") format("truetype"); }
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local("Roboto-Light"), local("Roboto-Light"), url("roboto/Roboto-Light.woff2") format("woff2"), url("roboto/Roboto-Light.woff") format("woff"), url("roboto/Roboto-Light.ttf") format("truetype"); }
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local("Roboto-Medium"), local("Roboto-Medium"), url("roboto/Roboto-Medium.woff2") format("woff2"), url("roboto/Roboto-Medium.woff") format("woff"), url("roboto/Roboto-Medium.ttf") format("truetype"); }
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local("Roboto-Bold"), local("Roboto-Bold"), url("roboto/Roboto-Bold.woff2") format("woff2"), url("roboto/Roboto-Bold.woff") format("woff"), url("roboto/Roboto-Bold.ttf") format("truetype"); }

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -0,0 +1,26 @@
// ----------------------------------------------------------------------------
// Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at),
// IT-Consulting and Development Limited.
//
// All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
// ----------------------------------------------------------------------------
// ---- Host the necessary MDL-Fonts locally
// - Usage: <link rel="stylesheet" href="packages/mdl/assets/fonts/fonts.css">
// -
@import "material";
@import "roboto";
@@ -1,64 +0,0 @@
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto-Regular'),
local('Roboto-Regular'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Regular.woff2') format('woff2'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Regular.woff') format('woff'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 200;
src: local('Roboto-Thin'),
local('Roboto-Thin'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Thin.woff2') format('woff2'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Thin.woff') format('woff'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Thin.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto-Light'),
local('Roboto-Light'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Light.woff2') format('woff2'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Light.woff') format('woff'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto-Medium'),
local('Roboto-Medium'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Medium.woff2') format('woff2'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Medium.woff') format('woff'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto-Bold'),
local('Roboto-Bold'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Bold.woff2') format('woff2'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Bold.woff') format('woff'),
url(package-root("assets/fonts/roboto/") + 'Roboto-Bold.ttf') format('truetype');
}
@@ -1,2 +0,0 @@
@import "../../fonts/material/material";
@import "../../fonts/roboto/roboto";
@@ -26,9 +26,13 @@
<link rel="canonical" href="http://www.example.com/">
-->
<link rel="stylesheet" href="packages/mdl/assets/fonts/fonts.min.css">
<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
<!-- Another way for accessing the necessary font:
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
->
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="styles.css">
@@ -38,10 +38,11 @@
<link rel="canonical" href="http://www.example.com/">
-->
<!-- Styleguide does not include fonts - it uses the MDL/Dart fonts via SCSS (styleguide.scss) -->
<!-- Page styles -->
<link rel="stylesheet" href="packages/mdl/assets/fonts/fonts.min.css">
<link id="theme" rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
<!-- Application-specific styles -->
<link rel="stylesheet" href="styleguide.css">
<style>
@@ -30,9 +30,10 @@
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<!-- Styleguide does not include fonts - it uses the MDL/Dart fonts via SCSS (styleguide.scss) -->
<!-- Page styles -->
<link rel="stylesheet" href="packages/mdl/assets/fonts/fonts.min.css">
<link id="theme" rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
<!-- Application-specific styles -->
<link rel="stylesheet" href="styleguide.css">
<style>
div.loading { display: none; }
Oops, something went wrong.

0 comments on commit 1bf8a47

Please sign in to comment.