With the unicode-range
property we can avoid using verbose markup and only target the characters we like according to the unicode unique identifier. We also harness the power of the %placeholder
in Sass allowing like minded selectors to string together this shared property in a DRY way from one single declaration. Copy and paste the Sass below into Codepen and check out the output for yourself. Hint: create multiple classes.
Amper & Sands
//Unicode Ampersand @font-face
$amp-fontface-name: Ampersand !default;
$amp-fontface-source: local('Georgia'), local('Garamond'), local('Palatino'), local('Book Antiqua') !default;
$amp-fontface-fallback: local('Georgia') !default;
// Allows for our ampersand element to have differing
// font-family from the ampersand unicode font-family.
$amp-font-family: Verdana, sans-serif !default;
@font-face {
font-family: '#{$amp-fontface-name}';
src: $amp-fontface-source;
unicode-range: U+0026;
}
// Ampersand fallback font for unicode range
@font-face {
font-family: '#{$amp-fontface-name}';
src: $amp-fontface-fallback;
unicode-range: U+270C;
}
@mixin ampersand($amp-font-family...) {
font-family: $amp-font-family;
}
%ampersand-placeholder {
@include ampersand($amp-fontface-name, $amp-font-family);
}
// Call your ampersand on any element you wish from another stylesheet
// using this Sass extend we've provided. For exmaple:
//
// <h6 class="ampersand">Dewey Cheat 'em & Howe</h6>
//
// .ampersand { @extend %ampersand-placeholder; }