Git Product home page Git Product logo

Comments (6)

ppiyush13 avatar ppiyush13 commented on September 28, 2024

@AndryWJ,

@font-face/core is not meant to be consumed programmatically. Instead it is a CLI tool to generate your font-face css file.

Steps:

  1. Install npm install @font-face/node --save-dev
  2. Configure options via config file. Look https://github.com/ppiyush13/font-face-node#options for list of all options and https://github.com/ppiyush13/font-face-node#cli-usage for all possible ways to define config file.
  3. Execute npx font-face from bash

Upon execution you will find font-face.css getting generated.

So this answers your question ?

from font-face-node.

AndryWJ avatar AndryWJ commented on September 28, 2024

I am trying to write a script that would take fonts from a folder and based on the name, collect the configuration and generate a css file.

fs.readdir(env.PATH_SRC+'fonts/FontsUse', (err, files) => {
    var fonts = [];
    files.forEach(file => {
        fonts.push(getFontsProperties(file));
    });

    console.log(fonts);
    // fontFaceNode({
    //     input: {
    //         dir: './src/fonts',
    //     },
    //     output: {
    //         dir: './dist',
    //         resourceDir: './dist/fontResources',
    //         cssFileName: 'font-face.css',
    //     },
    //     fonts: [
    //         {
    //             name: 'Roboto',
    //             weight: 200,
    //             style: 'normal',
    //             file: 'Roboto-Light',
    //         },
    //         {
    //             name: 'Roboto',
    //             weight: 400,
    //             style: 'normal',
    //             file: 'Roboto-Regular',
    //         },
    //         {
    //             name: 'Roboto',
    //             weight: 600,
    //             style: 'bold',
    //             file: 'Roboto-Medium',
    //         },
    //     ],
    // });

  });

  function getFontsProperties(fontFullName){
	  var out = {
		  'name' : fontFullName.match(/^(.*)-/)[1]
	  }
	  var weightConvert = {
	  'Thin' : 100,
	  'ExtraLight' : 200,
	  'Light' : 300,
	  'Regular' : 400,
	  'Medium' : 500,
	  'SemiBold' : 600,
	  'Bold' : 700,
	  'ExtraBold' : 800,
	  'Black' : 900
  };
	
	// .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
	var CamelCase = fontFullName.match(/.*-(.*)\./);
	var isItalic = CamelCase[1].match('Italic') !== null;
	if(isItalic){
		out['weight'] = weightConvert[CamelCase[1].replace('Italic','')];
		out['style'] = 'italic';
	}else{
		out['weight'] = weightConvert[CamelCase[1]];
		if(out['weight'] >= 600){ out['style'] = 'bold';}
		else{ out['style'] = 'normal'; }
	}
	
	return out;
}

It's a shame the module can't do this. But thanks for the answer.

from font-face-node.

AndryWJ avatar AndryWJ commented on September 28, 2024

Although ... you can first save the configuration, and then read)) and run npx font-face. Thank you)

from font-face-node.

ppiyush13 avatar ppiyush13 commented on September 28, 2024

You made a valid point. I have released version @font-face/[email protected]

Now you shall be able to execute below code:

const fontFaceNode = require('@font-face/node');
fontFaceNode({
    input: {
        dir: './src/fonts',
    },
    output: {
        dir: './dist',
        resourceDir: './dist/fontResources',
        cssFileName: 'font-face.css',
    },
    fonts: [
        {
            name: 'Roboto',
            weight: 200,
            style: 'normal',
            file: 'Roboto-Light',
        },
        {
            name: 'Roboto',
            weight: 400,
            style: 'normal',
            file: 'Roboto-Regular',
        },
        {
            name: 'Roboto',
            weight: 600,
            style: 'bold',
            file: 'Roboto-Medium',
        },
    ],
});

Please upgrade and report if any issues.

from font-face-node.

AndryWJ avatar AndryWJ commented on September 28, 2024

Many thanks! now I managed to do everything I wanted)


import fs from 'fs';
import dotenv from 'dotenv';
dotenv.config();
const env = process.env;
import fontFaceNode from '@font-face/node';

fs.readdir(env.PATH_SRC+'fonts/FontsUse', (err, files) => {
    var fonts = [];
    files.forEach(file => {
        fonts.push(getFontsProperties(file));
    });

    fontFaceNode({
        input: {
            dir: env.PATH_SRC+'fonts/FontsUse',
        },
        output: {
            dir: env.PATH_DIST+'/fonts/dist/FontsUse',
            resourceDir: env.PATH_DIST+'/fonts/dist/FontsUse',
            cssFileName: 'fonts.css',
        },
        fonts: fonts,
    });

  });
  

  function getFontsProperties(fontFullName){
	var out = {
		'name' : fontFullName.match(/^(.*)-/)[1],
        'file' : fontFullName.match(/^(.*)\./)[1]
	}
	var weightConvert = {
        'Thin' : 100,
        'ExtraLight' : 200,
        'Light' : 300,
        'Regular' : 400,
        'Medium' : 500,
        'SemiBold' : 600,
        'Bold' : 700,
        'ExtraBold' : 800,
        'Black' : 900
    };

	var CamelCase = fontFullName.match(/.*-(.*)\./);
	var isItalic = CamelCase[1].match('Italic') !== null;
	if(isItalic){
		out['weight'] = weightConvert[CamelCase[1].replace('Italic','')];
		out['style'] = 'italic';
	}else{
		out['weight'] = weightConvert[CamelCase[1]];
		if(out['weight'] >= 600){ out['style'] = 'bold';}
		else{ out['style'] = 'normal'; }
	}
	return out;
}

from font-face-node.

ppiyush13 avatar ppiyush13 commented on September 28, 2024

Thanks for reporting the issue.

from font-face-node.

Related Issues (2)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.