CodeKit-1-Old icon indicating copy to clipboard operation
CodeKit-1-Old copied to clipboard

Feature Request: font management, @font-face generation

Open webster opened this issue 13 years ago • 7 comments

Management of original fonts, generation of @font-face versions (eot, woff, ttf, svg) and the CSS syntax (like fontsquirrel), compression

webster avatar Nov 13 '11 20:11 webster

+1

kilianc avatar Nov 24 '11 17:11 kilianc

Hmm... this is definitely something I'm interested in because I use fonts in my sites.

How do you envision this working? Walk me through the ideal setup, if you would.

bdkjones avatar Jan 08 '12 09:01 bdkjones

this would eliminate my need to go to font squirrel for this, even if their generator is perfect for my needs, this would speed up my work

+1

as for how i'd envision it to work:

  1. add font folder to watch
  2. notify find, present options for generation (including a fonts.css file)
  3. generate said files and fonts.css file
  4. (optional) include generation for compass using a format like this

@each $webfont in "BreeSerifRegular", "LeagueGothic", "PTSansRegular", "PTSansBold", "PTSansItalic", "PTSansBoldItalic", "PTSansNarrowRegular", "PTSansNarrowBold", "PTSansCaptionBold" { @include font-face($webfont, font-files("#{$webfont}.woff", woff, "#{$webfont}.ttf", truetype, "#{$webfont}.svg##{$webfont}", svg), "#{$webfont}.eot" ); }

of course you'd have to also set the flag for the font's folder in config.rb like so:

fonts_dir = "assets/fonts"

sygint avatar Feb 23 '12 22:02 sygint

+1 :)

nathanpitman avatar Feb 24 '12 20:02 nathanpitman

+1 this feature will be awesome!

fabiozc avatar Apr 01 '12 01:04 fabiozc

-1 I think this is a bad idea. Browsers are evolving, and the best possible @font-face syntax may change. Also different developers may prefer their own flavor of the syntax. Last the path to relevant font files differs along with the css processing language used produce the css that points at it.

Simply generating a fonts.css as suggested is also not ideal, as it cannot be compiled into final output from less, sass or stylus but gets imported in a standard css fashion which is an additional browser request.

I feel this is better handled by developers using the already robust function of css pre-processors to generate @font-face statements that point to their own implementation. This is bloat imho.

Fresheyeball avatar Dec 03 '12 21:12 Fresheyeball

You can write a LESS mixin for this feature.

callaginn avatar Jul 15 '13 17:07 callaginn