Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Correct syntax for @font-face in Stylus / using stylus-font-face npm

I need to get the following CSS output from Stylus (bit of a backward way to do it but Stylus will make so many other parts of this project easier). I've tried a fair few things but can't get it to compile, and when it says that it has compiled nothing shows for this part of the output. I haven't had any joy implementing stylus-font-face - npm as the documentation there doesn't seem to show an example of the Stylus needed. Here's the output I need, and any help is really appreciated.

@font-face {
	font-family:'apercu-regular';
	src: url('../fonts/apercu-regular/Apercu_gdi.eot');
	src: url('../fonts/apercu-regular/Apercu_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fonts/apercu-regular/Apercu_gdi.woff') format('woff'),
		url('../fonts/apercu-regular/Apercu_gdi.ttf') format('truetype'),
		url('../fonts/apercu-regular/Apercu_gdi.svg#apercu-regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
like image 418
Tristan McDonald Avatar asked Jun 02 '15 10:06

Tristan McDonald


People also ask

How do I use the @font-face rule?

In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property: The @font-face rule is supported in Edge, Chrome, Firefox, Safari, and Opera.

Does stylus support every possible CSS syntax?

While Stylus don’t support every possible CSS-like syntax, it can understand even such code:

Can I use plain-CSS stylesheet with stylus?

So although not every plain-CSS stylesheet will work with zero modification, this feature allows those who prefer CSS syntax to continue doing so while leveraging Stylus’ other powerful features.

Can you mix and match Styles in Stylus?

There are a few caveats to this rule: since the two styles may be mixed and matched, some indentation rules still apply. So although not every plain-CSS stylesheet will work with zero modification, this feature allows those who prefer CSS syntax to continue doing so while leveraging Stylus’ other powerful features.


Video Answer


1 Answers

I've worked out how to get it to compile correctly in minimal syntax Stylus (I wanted to use Jeet, Boy and Rupture so I had to do it that way). Hope this helps someone.

@font-face
    font-family 'apercu-regular'
    src url('../fonts/apercu-regular/Apercu_gdi.eot')
    src url('../fonts/apercu-regular/Apercu_gdi.eot?#iefix') format('embedded-opentype'),url('../fonts/apercu-regular/Apercu_gdi.woff') format('woff'),url('../fonts/apercu-regular/Apercu_gdi.ttf') format('truetype'),url('../fonts/apercu-regular/Apercu_gdi.svg#apercu-regular') format('svg')
    font-weight 400
    font-style normal
    font-stretch normal`
like image 91
Tristan McDonald Avatar answered Sep 18 '22 08:09

Tristan McDonald