.ql-picker.ql-font {
  .ql-picker-item {
    font-size: 0;
    &:before {
      content: attr(data-value) !important;
      font-size: 14px;
    }
  }
}

.ql-picker.ql-font{
  .ql-active {
    &:before {
      content: attr(data-value) !important;
      font-size: 14px;
    }
  }
}

.ql-picker.ql-font .ql-picker-label[data-value="Roboto"]::before, 
.ql-picker.ql-font .ql-picker-item[data-value="Roboto"]::before
{
    font-family: "Roboto", cursive;;
    content: "Roboto" !important;
}

.ql-picker.ql-font .ql-picker-label[data-value="Pacifico"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="Pacifico"]::before
{
    font-family: "Pacifico", cursive;;
    content: "Pacifico" !important;
}

.ql-picker.ql-font .ql-picker-label[data-value="Amiri"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="Amiri"]::before
{
    font-family: "Amiri", cursive;;
    content: "Amiri" !important;
}

.ql-picker.ql-font .ql-picker-label[data-value="Sukar"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="Sukar"]::before
{
    font-family: "Sukar", cursive;;
    content: "Sukar" !important;
}

.ql-picker.ql-font .ql-picker-label[data-value="Sans Serif"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="Sans Serif"]::before
{
    font-family: "Sans Serif", cursive;;
    content: "Sans Serif" !important;
}

.ql-picker.ql-font .ql-picker-label[data-value="AbdoMaster"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="AbdoMaster"]::before
{
    font-family: "AbdoMaster", cursive;;
    content: "AbdoMaster" !important;
}

.ql-picker.ql-font .ql-picker-label[data-value="Poppins"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="Poppins"]::before
{
    font-family: "Poppins", cursive;;
    content: "Poppins" !important;
}




.ql-font-Roboto {
  font-family: "Roboto";
}

.ql-font-Pacifico {
  font-family: "Pacifico";
}

.ql-font-Amiri {
  font-family: "Amiri";
}

.ql-font-Sukar {
  font-family: "Sukar";
}

.ql-font-SansSerif {
  font-family: "Sans Serif";
}

.ql-font-AbdoMaster {
  font-family: "AbdoMaster";
}

.ql-font-Poppins {
  font-family: "Poppins";
}

.ql-snow{
  .ql-picker{
      &.ql-size{
          .ql-picker-label,
          .ql-picker-item{
              &::before{
                  content: attr(data-value) !important;
              }
          }
      }
  }
}