CSS Font Styling | Drupal 8

CSS Font Styling

Submitted by editor on Fri, 10/07/2016 - 11:15

Standard weights:

medium -> font-weight : 500;
semi-bold ->font-weight : 600;

Font Face


@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Open-Sans-regular.eot');
  src: url('../fonts/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
  local('Open Sans'),
  url('../fonts/Open-Sans-regular.woff2') format('woff2'),
  url('../fonts/Open-Sans-regular.woff') format('woff'),
  url('../fonts/Open-Sans-regular.ttf') format('truetype'),
  url('../fonts/Open-Sans-regular.svg#OpenSans') format('svg');

Font face With Unicode-range

@font-face {
  font-family: 'myfontstyle';
  url('../fonts/font_style.ttf') format('truetype');
  unicode-range: U+40;
div {
  font-size: 4em;
  font-family: myfontstyle;    

unicode-range Syntax
unicode-range: U+26;               /* single codepoint */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;        /* codepoint range */
unicode-range: U+4??;              /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */



More : http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Enter the characters shown in the image.