2

I have a bunch of files in a folder. They are formatted in the following ways:

Font1-Regular.ttf
Font1-Bold.ttf
Font2-SomeString-Regular.ttf
Font3.ttf

My goal is to create CSS representation of each font and a JSON object for each font type. For the fonts above it would look like this:

@font-face {
    font-family: "Font1-Regular";
    src: url("../assets/fonts/Font1-Regular.ttf");
}
@font-face {
    font-family: "Font1-Bold";
    src: url("../assets/fonts/Font1-Bold.ttf");
}
@font-face {
    font-family: "Font2-SomeString-Regular";
    src: url("../assets/fonts/Font2-SomeString-Regular.ttf");
}
@font-face {
    font-family: "Font3-Regular";
    src: url("../assets/fonts/Font3-Regular.ttf");
}

And JSON representation of the fonts:

[
    {
      fontName: "Font1",
      fontTypes: ["Regular", "Bold"]
    },
    {
      fontName: "Font2-SomeString",
      fontTypes: ["Regular"]
    },
    {
      fontName: "Font3",
      fontTypes: ["Regular"]
    }
]

This is the logic diagram for @font-faces creation:

  1. check if it contain - character
  2. if it does, than get the string after the last - and remove .ttf. Also get the string before the last -. If it doesn't, rename file to {previusFontName}-Regular.ttf and repeat step 2.
  3. crete new @font-face tag and append it to the file I am saving the results.

How do you check if a file contains character and then get the substring before and after the character?

I think I can handle the JSON part, once I learn how to create @font-faces.

Code so far (which returns some syntax errors)

find . -type f "*.ttf" -exec if [[{} =~ "-"]]; then echo {} else echo "FAIL" fi \;
1
  • The fc-query command may help you to extract and format all the relevant information from those ttf files. Oct 17 '17 at 10:26
1

I would use awk to manipulate and generate the output.

Here's an example of getting hold of the parts to get you going.

$:cat flist.fonts 
Font1-Regular.ttf
Font1-Bold.ttf
Font2-SomeString-Regular.ttf
Font3.ttf
a crap line

$:cat doit.awk
/^.*\.ttf/ {
 print NR, $0 # just prints the line number and line

 if (match($0,/([^-]+)-(.+)\.ttf/,arr)) { # find the 2 halves
 print "\tFirst part:", arr[1]
 print "\t2nd part:", arr[2] 
 if (match(arr[2],/([^-]+)-(.*)/,part2_arr)){ # check 2nd half for -
    print "\t\t2a:", part2_arr[1]
    print "\t\t2b:", part2_arr[2]
    } else {print "\t\tNo - in 2nd part"}
 } else 
 print "\tNo hyphen in name ??"
}

$:awk -f doit.awk flist.fonts
1 Font1-Regular.ttf
    First part: Font1
    2nd part: Regular
        No - in 2nd part
2 Font1-Bold.ttf
    First part: Font1
    2nd part: Bold
        No - in 2nd part
3 Font2-SomeString-Regular.ttf
    First part: Font2
    2nd part: SomeString-Regular
        2a: SomeString
        2b: Regular
4 Font3.ttf
    No hyphen in name ??
$:

You can use your original find command to generate the file list eg,

find . -type f "*.ttf" -print | awk -f doit.awk
1

Awk solution to obtain CSS presentation:

awk -F'.' '{ 
               fc=($1!~/-/? $1"-Regular":$1); 
               printf "@font-face {\n\tfont-family: \"%s\";\n\tsrc: url(\../assets/fonts/%s.%s\");\n}\n",fc,fc,$2 
           }' file

The output:

@font-face {
    font-family: "Font1-Regular";
    src: url("../assets/fonts/Font1-Regular.ttf");
}
@font-face {
    font-family: "Font1-Bold";
    src: url("../assets/fonts/Font1-Bold.ttf");
}
@font-face {
    font-family: "Font2-SomeString-Regular";
    src: url("../assets/fonts/Font2-SomeString-Regular.ttf");
}
@font-face {
    font-family: "Font3-Regular";
    src: url("../assets/fonts/Font3-Regular.ttf");
}

Bonus awk solution to obtain JSON presentation:

awk -F'.' '{ 
       if (/-/) { 
           len=split($1,a,"-"); 
           ft=a[len]; sub("-"ft,"",$1); ft="\""ft"\""; 
           if ($1 in fn) { fn[$1]=fn[$1]", "ft } else { fn[$1]=ft; c++ } 
       } else { 
           fn[$1]="\"Regular\""; c++ 
       } 
     }
     END{ 
         printf "[\n\t{\n"; 
         for (k in fn) printf "\t  fontName: \"%s\",\n\t  fontTypes: [%s]\n\t}%s\n",k, fn[k],(--c? ",":""); print "]" 
     }' file

The output:

[
    {
      fontName: "Font1",
      fontTypes: ["Regular", "Bold"]
    },
      fontName: "Font3",
      fontTypes: ["Regular"]
    },
      fontName: "Font2-SomeString",
      fontTypes: ["Regular"]
    }
]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.