Hacker News new | ask | show | jobs
by steakejjs 4111 days ago
You can already do regular fonts in pure css. See. Here's open sans in pure CSS. https://github.com/steakejjs/OpenSans-CSS

I've actually found its much nicer using this in my projects than using a font cdn or self hosting woff files.

I do like the minimalism of css rules to creating this font as opposed to having a giant data section. It's pretty neat

3 comments

I miss the html-pages of old times. http://motherfuckingwebsite.com/ Just full of information. Or non-information. But full of it and not full of empty space or animated backgrounds that makes my cpu-fan convert to jet-engine.
Thanks for this link! I've always love reading GNU manuals in HTML because it relies on your browser's navigation, which is always better than what any website could implement itself. Ctrl-F is fast because scrolling is trivial and doesn't require a Javascript callback for every pixel scrolled, and without a CSS-customized div after every paragraph, you can load web pages containing 2MB of text just fine.
Indeed. My 16 MHz Atari could handle homepages just fine. My 1.8 GHz laptop has troubles now and then and we should not speak about my 2 year old quad-core phone.
Why don't you read GNU manual with `man` in a terminal? (Genuine question)
Have to open up a new window anyway if it is any sort of long man-page that needs reading while constructing the command in another window?
motherfuckingwebsite.com is considered harmful. Try this one instead: http://bettermotherfuckingwebsite.com/
That one sets sizes and width in pixels. This gets very tiny if you print it with something that doesn't auto-fix this... :-)
I wouldn't call that a pure CSS font, as it's just a Base64 encoded WOFF font embedded in CSS as a data URI. It can save you for that extra HTTP request, though, if you only need to support modern browsers which support WOFF fonts.
All that's doing (I think) is encoding the font file as base64. You're still using the font binary blog.

The link itself is actually drawing/creating the font itself in CSS. Different method entirely.

Yeah, it is only base64ing the woffs. The reason I post it is that it has all the benefits of this project (only CSS) without the downsides (being ridiculously hard to use).
Not all the benefits. It requires web font support. I don't see this as a huge downside, but it is a fairly big difference.
is there any browser that supports transforms (skews), but doesn't support web fonts?
Not that hard to use; just replace each letter with a span tag.

It's a simple regex substitution or map().