Font-face mixin – choose which formats to use #278

whmii · 2014-08-01T21:55:46Z

I don't know if I'm missing something here, but does the font-face mixin assume you have .eot, .woff, .ttf and .svg files for your fonts? I would like to be able to use only .eot and .woff for example. Is this possible?

imakewebthings · 2013-11-09T01:09:29Z

@deepfriedmind It is currently not possible: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_font-face.scss

jaydenseric · 2014-02-10T03:53:59Z

The ability to set the formats would make a lot of sense. I have code inadvertently pointing to non existent SVG fonts of a few projects.

plapier · 2014-03-14T19:18:41Z

Good point. It would be a useful feature in the mixin.

Perhaps an $exclude list could be passed to the mixin to drop and filetypes you don't need?

@include font-face(font, 'font/font', normal, $exclude: woff svg);

KittyGiraudel · 2014-03-20T21:01:30Z

You should take it the other way around: a list of formats that are being used. Put them all as a default.

@mixin font-face(
  $font-family, 
  $file-path, 
  $weight: normal, 
  $style: normal, 
  $asset-pipeline: false, 
  $formats: eot woff ttf svg
) { 
  ... 
}

Excluding is kind of a weird thing. From my own experience, you'd better have a list of things that are being used rather than a list of things that are not. But that's just me.

plapier · 2014-03-27T19:12:52Z

@hugogiraudel Good call. That's a better solution.

whmii · 2014-08-01T22:01:10Z

I've added the option in this mixin. It is built so that you are able to pass in a list of filetypes. thanks to @hugogiraudel for the post on sass lists which is where a lot of this came from.

Also, to be able to iterate through the list of filetypes, I added a contains() function that will test if a list contains a defined value.

Here's a codepen of it so you can test it out → http://codepen.io/whmii/full/nfaBK/

ref: http://hugogiraudel.com/2013/07/15/understanding-sass-lists/

KittyGiraudel · 2014-08-01T22:03:12Z

You are adding too much complexity to your contains function. Here is how you should be doing it:

@function contains($haystack, $needle) {
  @return not not index($haystack, $needle);
}

tysongach · 2014-08-02T02:13:00Z

@whmii I’m confused. Was this PR re-opened by you? It seems like it was started by someone else, but the commits are from you, as if it was taken over, somehow.

whmii · 2014-08-02T02:34:15Z

@tysongach this was a bit of hub magic.
I used hub pull-request -i 278 -b thoughtbot:master -h thoughtbot:wm-fontface to convert the issue to a PR. it's OK but in the future i'll likely stick to just referencing the issue in the PR. also, it seems like this hub feature is going to be deprecated.

convert a github issue into a pull request http://opensoul.org/2012/11/09/convert-a-github-issue-into-a-pull-request/
hub feature is being depricated:
- https://github.com/github/hub/search?q=convert&ref=cmdform
- mislav/hub@4f70dd1

whmii · 2014-08-02T15:29:29Z

The contains() function has been updated with a more simple syntax in 6141fd5.

whmii · 2014-08-08T18:50:55Z

git status

awesome

conchan · 2014-08-29T14:14:01Z

app/assets/stylesheets/functions/_contains.scss

@@ -0,0 +1,5 @@
+// Test a Sass list to see if it contains a defined value
+
+@function contains($list, $valie) {


typo $value instead of $valie 😉

conchan · 2014-08-29T14:17:46Z

@whmii good stuff!

conchan · 2014-08-29T14:18:47Z

app/assets/stylesheets/helpers/_font-source-declaration.scss

+  $file-path,
+  $asset-pipeline,
+  $file-formats,
+  $font-url) {


Space after $font-url to match your @mixin font-face ( ... )

Never mind, after seeing Reda's comment about the mixin 😉

I'd go with no space to match the functions in the rest of the project.

I'm going to leave as is. This might be worth an update to the sass style guides for formatting sass maps and complex functions.

kaishin · 2014-08-29T15:12:01Z

Looking good to merge.

conchan · 2014-08-29T16:55:18Z

app/assets/stylesheets/css3/_font-face.scss

-           url('#{$file-path}.woff')                     format('woff'),
-           url('#{$file-path}.ttf')                      format('truetype'),
-           url('#{$file-path}.svg##{$font-family}')      format('svg');
+    @if contains($formats, eot) {


Should $formats be $file-formats?

whmii · 2014-08-29T18:22:54Z

Finally done. will rebase and merge once we get 1 more 👍 . A functional example can be found at http://codepen.io/whmii/pen/CHeoa/

mkempe · 2014-09-06T14:10:49Z

Hey there,

👍

Can we maybe add woff2 to the $formats-map:

$formats-map: (
  eot:   "#{$font-url}('#{$file-path}.eot?#iefix') format('embedded-opentype')",
  woff2: "#{$font-url}('#{$file-path}.woff2') format('woff2')",
  woff:  "#{$font-url}('#{$file-path}.woff') format('woff')",
  ttf:   "#{$font-url}('#{$file-path}.ttf') format('ttf')",
  svg:   "#{$font-url}('#{$file-path}.svg##{$font-family}') format('svg')"
);

but let the $file-formats argument as it is (eot woff ttf svg), because woff2 is to new and fancy.

Some links about the next generation woff:

https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a
http://sth.name/2014/09/03/Speed-up-webfonts

mkempe · 2014-09-23T17:57:55Z

Hey there,

just a note: Font Squirrel added support for WOFF2 to the Generator: https://twitter.com/FontSquirrel/status/509363706804076544

If you need a PR for woff2, just ping me.

tysongach · 2014-10-05T17:21:38Z

@mkempe Great idea, thanks!

@whmii Good to add WOFF2, per comment above? I’ll add it in, if so…I’m readying v4.1.0.

tysongach · 2014-11-03T23:11:58Z

@whmii Can you please add woff2 per comment above? And then squash your commits (probably down to 2 or 3—the addition of the contains should be its own)?

Use contains() to test if a list contains a defined value The contains function works by attempting to find the index of a value within a list. If it is unable to do so, the index function will return a false. If it does return a value, that value is then converted in to a `true` via `not not`.

* Use maps in font-face for less code duplication * Add font-url-prefixer function for rails pipeline * Add font-source-declaration function to handle font src logic * Add support for woff2

mkempe · 2014-11-04T19:52:41Z

Many thanks!

plapier added Future Feature labels Mar 14, 2014

tysongach added this to the 4.1.0 milestone Jul 30, 2014

tysongach removed Bourbon 4.1.0 labels Jul 30, 2014

conchan reviewed Aug 29, 2014
View reviewed changes

whmii force-pushed the wm-fontface branch from cbc4313 to 3f23291 Compare August 29, 2014 15:06

conchan reviewed Aug 29, 2014
View reviewed changes

whmii added 2 commits November 4, 2014 13:51

Add file type options to font-face mixin

11b6a9f

* Use maps in font-face for less code duplication * Add font-url-prefixer function for rails pipeline * Add font-source-declaration function to handle font src logic * Add support for woff2

whmii force-pushed the wm-fontface branch from ff0da4f to 11b6a9f Compare November 4, 2014 18:52

whmii merged commit 11b6a9f into master Nov 4, 2014

whmii deleted the wm-fontface branch November 4, 2014 18:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Font-face mixin – choose which formats to use #278

Font-face mixin – choose which formats to use #278

whmii commented Aug 1, 2014

imakewebthings commented Nov 9, 2013

jaydenseric commented Feb 10, 2014

plapier commented Mar 14, 2014

KittyGiraudel commented Mar 20, 2014

plapier commented Mar 27, 2014

whmii commented Aug 1, 2014

KittyGiraudel commented Aug 1, 2014

tysongach commented Aug 2, 2014

whmii commented Aug 2, 2014

whmii commented Aug 2, 2014

whmii commented Aug 8, 2014

conchan Aug 29, 2014

conchan commented Aug 29, 2014

conchan Aug 29, 2014

conchan Aug 29, 2014

kaishin Aug 29, 2014

whmii Aug 29, 2014

kaishin commented Aug 29, 2014

conchan Aug 29, 2014

whmii commented Aug 29, 2014

mkempe commented Sep 6, 2014

mkempe commented Sep 23, 2014

tysongach commented Oct 5, 2014

tysongach commented Nov 3, 2014

mkempe commented Nov 4, 2014

		@@ -0,0 +1,5 @@
		// Test a Sass list to see if it contains a defined value

		@function contains($list, $valie) {

Font-face mixin – choose which formats to use #278

Font-face mixin – choose which formats to use #278

Conversation

whmii commented Aug 1, 2014

imakewebthings commented Nov 9, 2013

jaydenseric commented Feb 10, 2014

plapier commented Mar 14, 2014

KittyGiraudel commented Mar 20, 2014

plapier commented Mar 27, 2014

whmii commented Aug 1, 2014

KittyGiraudel commented Aug 1, 2014

tysongach commented Aug 2, 2014

whmii commented Aug 2, 2014

whmii commented Aug 2, 2014

whmii commented Aug 8, 2014

conchan Aug 29, 2014

Choose a reason for hiding this comment

conchan commented Aug 29, 2014

conchan Aug 29, 2014

Choose a reason for hiding this comment

conchan Aug 29, 2014

Choose a reason for hiding this comment

kaishin Aug 29, 2014

Choose a reason for hiding this comment

whmii Aug 29, 2014

Choose a reason for hiding this comment

kaishin commented Aug 29, 2014

conchan Aug 29, 2014

Choose a reason for hiding this comment

whmii commented Aug 29, 2014

mkempe commented Sep 6, 2014

mkempe commented Sep 23, 2014

tysongach commented Oct 5, 2014

tysongach commented Nov 3, 2014

mkempe commented Nov 4, 2014