There's a free, cross-platform tool called **FontForge**, which can be used to create, edit, and view a wide array of font types.

**Homepage**: http://fontforge.org/ 
**Github**: https://github.com/fontforge/fontforge/

Here are some screenshots of it in action:

### WOFF

[![enter image description here][1]][1]

### WOFF2 ([added in 2018][2])


[![Woff2 Character Map][3]][3]

### Editing Characters

[![Editing Characters][4]][4]


 [1]: https://i.stack.imgur.com/YOWiq.png
 [2]: https://github.com/fontforge/fontforge/issues/1503
 [3]: https://i.stack.imgur.com/SnFks.png
 [4]: https://i.stack.imgur.com/3Bp6k.png

Is there any free or cheap editor for Windows, that would allow to edit files with .woff extension (I checked in css that the font file has woff extension). These are fonts offered by Google Webfonts and they are free to embed, modify etc. I'd like to only add diacritic accents to some letters for specific language and embed the font on a website.


How to edit .woff font files offered by Google Webfonts?

If you'd like to explicitly declare your package dependencies or automate the download, you can add a npm package to pull in google fonts and serve locally.

### Fontsource

[Fontsource][12] allows you to:

> Self-host Open Source fonts in neatly bundled NPM packages.

You can search npm for [<code>scope:fontsource <*typefacename*></code>][11] to browse the available fonts like [@fontsource/roboto][2] or [@fontsource/open-sans][10] and install like this:



 $ npm install @fontsource/roboto --save 
 $ npm install @fontsource/open-sans --save 

### Font Downloaders

For a more generic use case, there are several npm packages that will deliver fonts in two steps, first by installing the library, and then by pointing it to the font name and options you'd like to include.

* [Google Fonts Webpack Plugin][4]
* [Google Fonts Offline][5]
* [Google Fonts][6]
* [Get Google Fonts][7]

### Further Reading: 

* [How to host material icons offline?][1]
* [Using offline Material icons and Roboto font in Electron app][8]
* **Archived**: [Typefaces][9] 

[1]: https://stackoverflow.com/q/37270835/1366033
[2]: https://www.npmjs.com/package/@fontsource/roboto
[3]: https://www.npmjs.com/package/material-icons
[4]: https://www.npmjs.com/package/google-fonts-webpack-plugin
[5]: https://www.npmjs.com/package/google-fonts-offline
[6]: https://www.npmjs.com/package/google-fonts
[7]: https://www.npmjs.com/package/get-google-fonts
[8]: https://medium.com/@daddycat/using-offline-material-icons-and-roboto-font-in-electron-app-f25082447443
[9]: https://github.com/KyleAMathews/typefaces
[10]: https://www.npmjs.com/package/@fontsource/open-sans
[11]: https://www.npmjs.com/search?q=scope%3Afontsource
[12]: https://github.com/fontsource/fontsource

I have a template and it has a reference to a Google font like this:



 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

How can I download it and set it up to use in my pages which are running offline all the time?

Downloading a Google font and setting up an offline site that uses it

You're right to think that Based on the [Font Awesome naming conventions][New Naming], what you're trying to do ought to work:

Ironically, their impetus for changing the naming convention was:

> A desire for better icon naming **consistency** and **predictability**

However, they have not done a good job at documenting which symbol variants are available.

Notice `fa-check-circle` works, but `fa-twitter-circle` doesn't.

If you <kbd>Ctrl</kbd>+<kbd>F</kbd> for "circle" right on their [CSS source][font-awesome.css], you'll notice that only the following symbols have a circle version:

* Play*
* Plus*
* Minus
* Times*
* Check*
* Question
* Info
* Crosshairs
* Exclamation
* Arrow*
* Dot
* Chevron*

**(some variants included as well)*

If you put in anything else, it will just become a random jarble of characters as far as the CSS is concerned. It does not meet anyone of their predefined classes, so it won't treat it as anything special; which is why you lose the icon when you try to add the circle.


The alternative already proposed is to use [`fa-stack`][fa-stack] to manually combine a circle and a circle and a bird. Since the circle seems a little thick, instead of inverting the bird with `-o`, you can invert the circle with `.fa-inverse` like this:



 
 
 
 

Here's a **[Demo of the stacked option and every available circle icon][jsFiddle]**.

Here's a screnshot of what the demo looks like:

![screenshot][screenshot]

[New Naming]: http://fortawesome.github.io/Font-Awesome/whats-new/#new-naming
[fa-stack]: http://fortawesome.github.io/Font-Awesome/examples/#stacked
[font-awesome.css]: https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css
[jsFiddle]: http://jsfiddle.net/KyleMit/qfMdP/
[screenshot]: http://i.imgur.com/ZGq3J2E.png

I am trying to use Font Awesome 4.0.3 with the `-circle` and `-o tags` and my icons disappear each time.

I am using it like so: ``

I don't get a blank square or anything else of the sorts; just a blank.

This works: ``

Shouldn't the first work according to their [new naming conventions][1]?

*** EDIT ***

To elaborate a bit, I know I can stack them like you could in 3x, so for the time being, I have the following (since the circle is so thick):



 
 
 
 

Maybe I am misinterpreting the docs on the FA site, but I read it as the other *should* work.


 [1]: http://fortawesome.github.io/Font-Awesome/whats-new/

Font Awesome 4.0.3 -circle not working

Some suggestions if you want to make your logo portable and available offline you should *consume* and *embed* the smallest version of your font possible.

First, **optimize the font size**, by only pulling in the stroke weights and characters you actually need.

So instead of this:



<pre><code><a href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic</a></code></pre>


Condense the options and also add the `?text=abc` param to only grab a subset of glyphs like this:



<pre><code><a href="https://fonts.googleapis.com/css?family=Roboto:700&text=Words%20go%20here">https://fonts.googleapis.com/css?family=Roboto:700&text=Words%20go%20here</a></code></pre>

Inside your svg, you can include a [`@font-face`][6] declaration in a stylesheet in the `<defs>` tag like this:




<pre><code>&lt;defs&gt;
 &lt;style&gt;
 @font-face {
 font-family: "Sample font";
 src: url("data:application/font-woff;charset=utf-8;base64,&lt;b64&gt;") format("woff2");
 }
 &lt;/style&gt;
&lt;/defs&gt;</code></pre>

Grab the file by navigating to the google fonts stylesheet and downloading the actual .woff2 file. You can convert it to a b64 string using [base64-encoder][2] or read more at [Converting and rendering web fonts to base64][3]. Take that string and include it in your file. Just for clarity, you could also specify the [unicode range][4] on the font-face to make explicit that you're only pulling in some characters





 <svg xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 viewBox="0 0 280 140" width="300">

 <defs>

 <style>
 /* https://fonts.googleapis.com/css?family=Patrick+Hand&text=KAM */
 @font-face {
 font-family: 'Patrick Hand';
 /* src: url(https://fonts.gstatic.com/l/font?kit=LDI1apSQOAYtSuYWp8ZhfYeMXNDN0vF8&skey=7fb0ea6515a61339&v=v11) format('woff2') */
 src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff2');
 unicode-range: U+004B, U+0041, U+004D
 }
 text { 
 font-size: 140px;
 font-family: 'Patrick Hand', cursive;
 font-weight: 700; 
 }
 </style>
 </defs> 

 <text x="51" y="132" rotate="-30">K</text>
 <text x="100" y="100" rotate="0">A</text>
 <text x="150" y="95" rotate="30">M</text>

 </svg>



**See Also**: 

* [How do I embed Google Web Fonts into an SVG?][1]

[1]: https://graphicdesign.stackexchange.com/a/5167/35880
[2]: https://www.giftofspeed.com/base64-encoder/
[3]: https://stackoverflow.com/q/26867893/1366033
[4]: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range
[6]: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

I'm embedding SVGs in my page with the `<object>` tag, and they're supposed to utilize Google Fonts (e.g. [Roboto][1]). However, the SVGs aren't picking these fonts up and instead default to system fonts.

What am I doing wrong? Does every SVG require that the font itself be embedded in `<style>`?

**Example code:**

 <head>
 <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
 </head>
 
 <body>
 <object width="250" height="200" type="image/svg+xml" data="img/popup_image.svg"></object>
 </body>

**SVG snippet:**

 <text font-size="14" fill="#333" font-family="Roboto">Words go here</text>

 [1]: https://www.google.com/fonts#UsePlace:use/Collection:Roboto