Merge pull request #72 from plone/allcaps-font-face

Fix font-face. Add full glyph set Roboto fonts.
plone · Dec 28, 2015 · 5198c9c · 5198c9c
2 parents 36fbc56 + faab752
commit 5198c9c
Show file tree

Hide file tree

Showing 70 changed files with 121,188 additions and 1,519 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -10,7 +10,14 @@ New:
 
 Fixes:
 
+- Fix @font-face. Load eot, svg and woff.
+  [allcaps]
+
+- Add Roboto fonts with full glyph set
+  [allcaps]
+
 - Add weight to all fonts (contributes to `#24`_).
+  [allcaps]
 
 - Restore the principal aka jumbotron background.
   [allcaps]

diff --git a/HOWTO_DEVELOP.rst b/HOWTO_DEVELOP.rst
@@ -25,4 +25,10 @@ Note
 Note
 ----
 
-All css is compiled from LESS files. Do NOT edit the file barceloneta.css.original-reference, it is not read and is just there for reference purposes.
+All css is compiled from LESS files. Do NOT edit the file barceloneta.css.original-reference, it is not read and is just there for reference purposes.
+
+
+Fonts
+-----
+
+Read `plonetheme.barceloneta/plonetheme/barceloneta/theme/less/roboto/README.rst if you need to update the shipped fonts.
diff --git a/plonetheme/barceloneta/theme/less/barceloneta-compiled.css b/plonetheme/barceloneta/theme/less/barceloneta-compiled.css
diff --git a/plonetheme/barceloneta/theme/less/barceloneta-compiled.css.map b/plonetheme/barceloneta/theme/less/barceloneta-compiled.css.map
diff --git a/plonetheme/barceloneta/theme/less/barceloneta.plone.less b/plonetheme/barceloneta/theme/less/barceloneta.plone.less
@@ -14,6 +14,7 @@
 	@import "mixin.clearfix.plone.less";
 	@import "mixin.gridframework.plone.less"; //grid Bootstrap
 	@import "mixin.grid.plone.less"; //grid Bootstrap
+	@import "mixin.font.plone.less";
 
 
 //*// Reset and dependencies

diff --git a/plonetheme/barceloneta/theme/less/fonts.plone.less b/plonetheme/barceloneta/theme/less/fonts.plone.less
@@ -1,84 +1,111 @@
 //*// FONTS //*//
 
-// Roboto Fonts are availeble the following weights (* is used in Barceloneta):
-//
-//  - 100 Thin
-//  - 300 Light  *
-//  - 400 Normal *
-//  - 500 Medium
-//  - 700 Bold   *
-//  - 900 Ultra-Bold
+// 300 Light
+.font-face(
+    @font-path:     'roboto/';
+	@file-name:     'Roboto-Light';
+	@font-family:   'Roboto';
+	@font-weight:   300;
+	@font-style:    normal;
+	@svg-id:        'robotolight';
+    @local:         ~"local('Roboto Light'),";
+);
 
+// 300 Light Italic
+.font-face(
+    @font-path:     'roboto/';
+	@file-name:		'Roboto-LightItalic';
+	@font-family:	'Roboto';
+	@font-weight:	300;
+	@font-style:	italic;
+	@svg-id:		'robotolight_italic';
+    @local:         ~"local('Roboto Light Italic'),";
+);
 
-// 300
-@font-face {
-	font-family: "Roboto";
-	font-style: normal;
-	font-weight: 300;
-	src: local('Roboto Light'), local('Roboto-Light'), url("roboto/Roboto-Light.ttf") format('truetype');
-}
-@font-face {
-	font-family: "Roboto";
-	font-style: italic;
-	font-weight: 300;
-	src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url("roboto/Roboto-LightItalic.ttf") format('truetype');
-}
+// 400 Regular
+.font-face(
+    @font-path:     'roboto/';
+	@file-name:		'Roboto-Regular';
+	@font-family:	'Roboto';
+	@font-weight:	400;
+	@font-style:	normal;
+	@svg-id:		'robotoregular';
+    @local:         ~"local('Roboto Regular'),";
+);
 
-// 400
-@font-face {
-	font-family: "Roboto";
-	font-style: normal;
-	font-weight: 400;
-	src: local('Roboto Regular'), local('Roboto-Regular'), url("roboto/Roboto-Regular.ttf") format('truetype');
-}
-@font-face {
-	font-family: "Roboto";
-	font-style: italic;
-	font-weight: 400;
-	src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url("roboto/Roboto-Italic.ttf") format('truetype');
-}
+// 400 Italic
+.font-face(
+    @font-path:     'roboto/';
+	@file-name:		'Roboto-Italic';
+	@font-family:	'Roboto';
+	@font-weight:	400;
+	@font-style:	italic;
+	@svg-id:		'robotoitalic';
+    @local:         ~"local('Roboto Italic'),";
+);
 
-// 500
-@font-face {
-	font-family: "Roboto";
-	font-style: normal;
-	font-weight: 500;
-	src: local('Roboto Medium'), local('Roboto-Medium'), url("roboto/Roboto-Medium.ttf") format('truetype');
-}
-@font-face {
-	font-family: "Roboto";
-	font-style: italic;
-	font-weight: 500;
-	src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url("roboto/Roboto-MediumItalic.ttf") format('truetype');
-}
+// 500 Medium
+.font-face(
+    @font-path:     'roboto/';
+    @file-name:		'Roboto-Medium';
+	@font-family:	'Roboto';
+	@font-weight:	500;
+	@font-style:	normal;
+	@svg-id:		'robotomedium';
+    @local:         ~"local('Roboto Medium'),";
+);
 
-// 700
-@font-face {
-	font-family: "Roboto";
-	font-style: normal;
-	font-weight: 700;
-	src: local('Roboto Bold'), local('Roboto-Bold'), url("roboto/Roboto-Bold.ttf") format('truetype');
-}
-@font-face {
-	font-family: "Roboto";
-	font-style: italic;
-	font-weight: 700;
-	src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url("roboto/Roboto-BoldItalic.ttf") format('truetype');
-}
+// 500 Medium Italic
+.font-face(
+    @font-path:     'roboto/';
+	@file-name:		'Roboto-MediumItalic';
+	@font-family:	'Roboto';
+	@font-weight:	500;
+	@font-style:	italic;
+	@svg-id:		'robotomedium_italic';
+    @local:         ~"local('Roboto Medium Italic'),";
+);
 
+// 700 Bold
+.font-face(
+    @font-path:     'roboto/';
+	@file-name:		'Roboto-Bold';
+	@font-family:	'Roboto';
+	@font-weight:	700;
+	@font-style:	normal;
+	@svg-id:		'robotobold';
+    @local:         ~"local('Roboto Bold'),";
+);
 
-//*// Condensed (Toolbar)
-// 300
-@font-face {
-	font-family: "Roboto Condensed";
-	font-style: normal;
-	font-weight: 300;
-	src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url("roboto/RobotoCondensed-Light.ttf") format('truetype');
-}
+// 700 Bold Italic
+.font-face(
+    @font-path:     'roboto/';
+	@file-name:		'Roboto-BoldItalic';
+	@font-family:	'Roboto';
+	@font-weight:	700;
+	@font-style:	italic;
+	@svg-id:		'robotobold_italic';
+    @local:         ~"local('Roboto Bold Italic'),";
+);
 
-@font-face {
-	font-family: "Roboto Condensed";
-	font-style: italic;
-	font-weight: 300;
-	src: local('Roboto Condensed Thin Italic'), local('RobotoCondensed-LightItalic'), url("roboto/RobotoCondensed-LightItalic.ttf") format('truetype');
-}
+// 300 Light Condensed (toolbar)
+.font-face(
+    @font-path:     'roboto/';
+	@file-name:		'RobotoCondensed-Light';
+	@font-family:	'Roboto Condensed';
+	@font-weight:	300;
+	@font-style:	normal;
+	@svg-id:		'roboto_condensedlight';
+    @local:         ~"local('Roboto Condensed Light'),";
+);
+
+// 300 Light Condensed Italic (toolbar)
+.font-face(
+    @font-path:     'roboto/';
+	@file-name:		'RobotoCondensed-LightItalic';
+	@font-family:	'Roboto Condensed';
+	@font-weight:	300;
+	@font-style:	italic;
+	@svg-id:		'roboto_condensedlight_italic';
+    @local:         ~"local('Roboto Condensed Thin Italic'),";
+);
diff --git a/plonetheme/barceloneta/theme/less/mixin.font.plone.less b/plonetheme/barceloneta/theme/less/mixin.font.plone.less
@@ -0,0 +1,15 @@
+//*// MIXIN FONT FACE //*//
+
+.font-face(@font-path; @file-name; @font-family; @font-weight; @font-style; @svg-id; @local, ~'';) {
+  @font-face {
+    font-family: @font-family;
+    src: url('@{font-path}@{file-name}.eot');
+    src: @local
+       url('@{font-path}@{file-name}.eot?#iefix') format('embedded-opentype'),
+       url('@{font-path}@{file-name}.woff') format('woff'),
+       url('@{font-path}@{file-name}.ttf') format('truetype'),
+       url('@{font-path}@{file-name}.svg#@{svg-id}') format('svg');
+    font-weight: @font-weight;
+    font-style: @font-style;
+  }
+}