Add Cyrillic to Source Sans Pro Font for Lumen Bootstrap Theme

The free themes catalog for Bootstrap has a nice Lumen theme, it uses the Source Sans Pro font, in which the Cyrillic alphabet is out of the box. This problem can be partially solved by compiling the font from source. Why partially - see the conclusion.

1. Install the Adobe Font Development Kit for OpenType

Download Adobe Font Development Kit for OpenType . Installation is reduced to unpacking the archive into a folder with an absolute path that does not contain spaces, and running the FinishInstallWindows.cmd script with Administrator rights. After that, you need to re-login, or reboot.

2. Download font sources

Download from GitHub a fork of the font sources and unpack it somewhere. This branch contains Cyrillic and Greek alphabets, which are not yet included in the official release.
')

3. Determine the required styles.

Font sources contain many different styles, find out which ones we need. Opening the Lumen theme's bootstrap.css file, in the first line we see that the fonts are imported from google server:

@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic"); 

Go to this address, we get the description:

 @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format('woff'); } 

This means that we need only four styles: Light, Regular, Bold, Italic.

4. Compile the styles

The compilation is done with the makeotf -r command. This command processes one style in the current folder in one call. Instead of going through the folders in the console and running the command manually each time, create a script for PowerShell, which will compile all the necessary files in batch mode. Take the build.sh script from the root folder of the font and save the new file as build.ps1 there.

 $family='SourceSansPro' $romanWeights='Bold', 'Light', 'Regular' $italicWeights='It' # clean existing build artifacts rm -recurse -force target mkdir target mkdir target\otf foreach ($w in $romanWeights) { cd Roman\$w makeotf -r -o ..\..\target\otf\$family-$w.otf cd ..\.. rm Roman\$w\current.fpr # remove default options file from the source tree after building } foreach ($w in $italicWeights) { cd Italic\$w makeotf -r -o ..\..\target\otf\$family-$w.otf cd ..\.. rm Italic\$w\current.fpr # remove default options file from the source tree after building } 

We try to run the script . \ Build.ps1 with administrator rights. If a security error occurs, it means that the launch of PowerShell scripts is prohibited by the policy. To allow execution, enter the command:

 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned 

After that, everything should work, and four .otf files will appear in the target \ otf \ folder.

5. Convert .otf to .woff

Download sfnt2woff and save in the folder with the font. We write the convert.ps1 script to convert:

 $otfFiles = dir target\otf -Filter *.otf -Name # clean existing convert artifacts rm -recurse -force target\woff mkdir target\woff foreach ($otf in $otfFiles) { .\sfnt2woff.exe target\otf\$otf } mv target\otf\*.woff target\woff 

After running the script, the converted files will appear in the target \ woff \ folder.

6. Connect the font to the project

In the case of ASP.NET MVC, copy the .woff files to the fonts \ project folder and include them in it. In the Content \ folder, create a new file bootstrap.lumen.path.css and write the following into it:

 @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: url(/fonts/SourceSansPro-Light.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: url(/fonts/SourceSansPro-Regular.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: url(/fonts/SourceSansPro-Bold.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; src: url(/fonts/SourceSansPro-It.woff) format('woff'); } 

Add a new line to the file App_Start \ BundleConfig.cs . It is important that it be lower than bootstrap.lumen.css .

 bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.lumen.css", "~/Content/bootstrap.lumen.path.css", "~/Content/site.css")); 

Conclusion

That's all, the problem is partially solved. Partly - because at the moment there is no italic for Cyrillic.


Font developer, Paul Hunt , answered a question about italics that Cyrillic will ever appear, but he cannot tell when this will happen.

Archive ready .woff files can be downloaded here .