استفاده از فونت های فونت ایران با Gulp

یک مدت پیش روی یه پروژه‌ای کار می‌کردم و نیاز به استفاده از فونت داشتم. توی اون پروژه از فونت های فونت‌ایران استفاده کردم.

این روزا بیشتر از Gulp استفاده می‌کنم، در حین انجام کار یه سری کد برای کار با اون هم نوشتم که کار قرار دادن فونت ها توی پروژه را راحت کنه.

چند وقت پیش که بیکار بودم، یه دستی به سر اون کدها کشیدم و تبدیلش کردم به یه پلاگین برای Gulp و گذاشتمش روی GitHub و روی ریپوزیتوری NPM هم قرارش دادم.

این پکیج به شما امکان این را میده که فونت هایی که از قبل خریدید و داخل داخل پروفایلتون موجود است را فقط با قرار دادن اسمشون خودکار دانلود کنید و به پروژه اضافه کنید.

اگر از Gulp استفاده می‌کنید با یه دستوری شبیه به دستور زیر می‌تونید اون را به پروژه اضافه کنید.

npm install --save @nekofar/gulp-fontiran

بعد می‌تونید یوزرنیم و پسورد خودتون را به توی فایل .env پروژتون مثلا اضافه کنید.

cat >> .env <<EOF
FI_USER=username
FI_PASS=password
EOF

در آخر هم با یه کدی شبیه به این در داخل فایل gulpfile.js خودتون می‌تونید توسط Gulp فونت ها را دانلود و در پروژه استفاده کنید.

const gulp = require("gulp");
const unzip = require("gulp-unzip");
const minimatch = require("minimatch");
const concat = require('gulp-concat');
const header = require('gulp-header');
const fontiran = require("@nekofar/gulp-fontiran");

/**
 * Download and add Fontiran fonts
 *
 * @returns {*}
 */
function fonts() {
  return fontiran(["iran-sharp"])
    .pipe(
      unzip({
        filter: function(entry) {
          return minimatch(
            entry.path,
            "IRANSharp/Farsi_numerals_(Non Standard)/" +
              "WebFonts/**/*.+(css|eot|ttf|woff|woff2)"
          );
        }
      })
    )
    .pipe(gulp.dest("/path/for/fonts/"));
}

/**
 * Process and concat styles
 *
 * @returns {*}
 */
function styles() {
  return gulp
    .src("/path/to/src/styles")
    .pipe(concat({ path: "all.css" }))
    .pipe(
      header(
        [
          "/*!",
          " * IRAN Sans-serif fonts are considered a proprietary software.",
          " * To gain information about the laws regarding the use of these fonts, ",
          " * please visit www.fontiran.com",
          " * --------------------------------------------------------------------------------",
          " * This set of fonts are used in this project under the license: (<%= license %>)",
          " * --------------------------------------------------------------------------------",
          "*/",
          ""
        ].join("\n"),
        { license: "your license code" }
      )
    )
    .pipe(gulp.dest("/path/for/dest/styles"));
}

const build = gulp.series(fonts, styles);

exports.fonts = fonts;
exports.styles = styles;

exports.build = build;

exports.default = build;

فونت‌ایران API برای راحت تر شدن کار ارایه نداده، برای همین ممکنه تغییر توی سایتشون در آینده باعث بشه درست کار نکنه اما در این صورت سعی میکنم دوباره فیکسش کنم که کار کنه، اما فعلا کار راه اندازه و اگر خواستید بهترش کنید می‌تونید توی گیت‌هاب مطرح کنید یا پول ریکوئست بفرستید.

استفاده از فونت های فونت ایران با Gulp

دیدگاه خود را ثبت کنید

دیدگاهتان را بنویسید لغو پاسخ