Está en la página 1de 23

¿Forma de reducir el tamaño de las

fuentes .ttf?
¿Hay alguna forma de reducir el tamaño de las fuentes .ttf? es decir, si queremos
eliminar algunos glifos que no estamos usando.

FontSquirrel's Webfont generator hace que sea muy fácil reducir el tamaño de archivo
de una fuente.

 Sube tu fuente
 Elija Experto ...
 Elige qué glifos incluir
 Presione Descargue su kit

Pude reducir una fuente de 263 kb a 34 kb.

Hice lo siguiente para eliminar todos los glifos cirílicos (letras) de una fuente, por lo
tanto, reduje el tamaño del archivo a la mitad ya que solo necesitaba las letras latinas.

1. obtener FontForge ( https://fontforge.github.io/en-US/ )


2. inicie FontForge y abra su archivo de fuente ttf
3. vaya a Editar -> Seleccionar -> Seleccionar por secuencia de comandos
4. en la ventana de selección emergente, elija Cirílico del menú desplegable. Como
habrás adivinado, esto marcará solo las letras cirílicas.
5. vaya a Codificación -> Separar y quitar glifos, confirme la pregunta. ¿Ves cómo
desaparecen las letras cirílicas?
6. vaya a Codificación -> Compacto para obtener una mejor visión general de las
letras restantes, lo que facilita la selección de más candidatos para eliminar.
(Pero no me atreví a eliminarlos/eliminarlos manualmente).
7. vaya a Archivo -> Generar fuentes y no olvide elegir ttf como formato de salida.

Tenga en cuenta que no soy un profesional en esto. Pero necesitaba una solución rápida.
Si realmente desea quitar ciertos glifos de una fuente, necesitará una herramienta de
edición de fuente (Macromedia tenía una llamada Fontographer que ahora es
propiedad de FontLab). Pero probablemente sea mejor simplemente elegir una fuente
más ligera. Por ejemplo, OCR A Std es de solo 30 kb e incluye sugerencias ClearType,
así como todos los caracteres US ASCII. Intente evitar las fuentes Unicode ya que el
soporte completo de Unicode requiere un montón de glifos. Pero la mayoría de las
fuentes no ofrecen Unicode completo apoyo.

Por último, si decide modificar una fuente, asegúrese de nombrarla de otra manera. Un
conflicto de nombres podría dar lugar a sorpresas realmente molestas para los usuarios.

Create a new TrueType font using a


subset of characters from an existing
TrueType font
From Unify Community Wiki

Jump to: navigation, search

So, Arial Unicode MS has all the characters you need ... but importing it generates a
16MB file!

Wouldn't it be nice to extract only those symbols/characters you need?

Requirements:

1. Download and install FontForge


2. Get a unicode font, e.g. Arial Unicode MS. The ArialUni.ttf font can be found in
Windows in C:\WINDOWS\Font

How to extract a specific sub range of characters:

1. Open the font in FontForge

2. Select the Unicode subrange you want by going to Edit->Select->Select by Script.


i) In the pop up window select the range you want and press the OK button.
Note: Unless you are already looking at the specific subrange you won't notice that they
have been highlighted in yellow.

3. Add the space character to your selection - hold down shift and left click on Unicode
char U+0020 (ASCII 32 - just to the left of the exclamation mark char). It should be
highlighted in yellow.
4. Invert your selection by going to Edit->Select->Invert Selection

5. Remove these unwanted symbols by going to Encoding->Detach & Remove Glyphs.


This may take some time - but when it is finished you will notice that all the highlighted
font cells have now been crossed out.

Operation in progress example (this may take sometime, try not to touch anything
FontForge can be a bit unstable):

Operation complete example, all the selected symbols have been replaced with crosses:
You may find some of your character cells have blue in them, I don't know what this
means but it has not caused me any problems:
6. Compact your new font to only the useable symbols by going to Encoding-
>Compact.
Compacted font example:
7. Generate the TTF font by going to File->Generate Fonts.
The only option I change is the export type to TrueType.
8. Import into Unity, sacrifice something to the God of FontForge and enjoy.

Reducing truetype font file size for


embedded systems
Embedded systems often have limited memory, that can be a challenge when your
application requires Asian languages where fonts might be several megabytes large.
Below we describe a method to reduce the file size with Fontforge using simhei.ttf, a
CJK font as an example.

Fontforge

Fontforge is an open source font editor running under Linux and Windows/Cygwin. For
the latest version see http://fontforge.sourceforge.net/

Reducing Font Size

 Removing Bitmap from Font File.

Some TrueType files embed a bitmap version of the font. When Fontforge opens such a
file, it will ask whether to keep the bitmap or not. We can remove the bitmap to reduce
the file size.
 Using a glyphs subset adapted to your application.

We can use Fontforge with cidmap (Fontforge proprietary) and/or Cmap (from adobe)
to perform this task. Please check
http://partners.adobe.com/public/developer/font/index.html#ckf for further information
on CJK/CID file for your language.

In our example (simhei.ttf), which can be obtained from Microsoft Windows font
directory, if we want to keep the glyphs for simplified Chinese, we can choose to use
Adobe-GB1-0. We just need to edit the cidmap Adobe-GB1-4.cidmap in Fontforge
directory and keep only lines for CID numbers from 0 to 7716 (This is compatible with
GB2318 – Cf paragraph 2
http://partners.adobe.com/public/developer/en/font/5079.Adobe-GB1-4.pdf.) save the
file as Adobe-GB1-0.cidmap.  In the top menu in Fontforge, select CID->Convert to
CID , then browse to get Adobe-GB1-0.cidmap and click OK.  You should see the
following box appear:

Select Delete to remove the extraneous glyphs.

Then on the top menu click on CID->Flatten to return to normal font type.

 Removing Glyphs Names.

The final step is to remove the Glyphs names which takes a lot of space and are of no
use for embedded systems. In the top menu, select File->Generate Fonts, then Options
and make sure that PS Glyph Names is unchecked:
Conclusion

Following the three steps above, we reduce the file size of simhei.ttf from 9.57MB to
1.98MB.
Further minor size reduction should be possible by using Elements->Font Info.
However, some of the options may reduce the font quality.

Fusionando dos fuentes


¿Cómo puedo combinar dos fuentes
automáticamente, de modo que los glifos
que no están disponibles en la primera
fuente, pero están disponibles en la
segunda, se pueden combinar en la
primera fuente?
Esta es una tarea fácil con fontforge .

Anexo de los comentarios: antes de combinar, haga clic en Elemento> Información de


fuente ... en ambas fuentes primero para ver si los valores como el tamaño de em
coinciden. De lo contrario, actualice para que coincida con los valores de la otra
fuente. Esto evita problemas como diferentes tamaños de caracteres. Esta información
probablemente debería agregarse a la respuesta. - Cristan
Primero, desea abrir la fuente con los glifos faltantes y seleccionar Element -> Merge
Fonts. En este ejemplo, los glifos para Ey Fson los que faltan.

Seleccione la fuente de la que desea extraer los glifos. Se le preguntará si desea


mantener el kerning existente; es muy probable que desee seleccionar Noaquí, pero si le
da resultados extraños cerca fontforge y tratar de nuevo con Yes.
Los glifos faltantes deben agregarse en unos momentos:

Finalmente, haga File -> Generate Fontsy exporte su fuente a la ubicación deseada.

Antes de fusionar, haga clic en


Elemento> Información de fuente ... en
ambas fuentes primero para ver si los
valores como tamaño de em coinciden.
De lo contrario, actualice para que
coincida con los valores de la otra fuente.
Esto evita problemas como diferentes
tamaños de caracteres. Esta información
probablemente debería agregarse a la
respuesta.

Edición de fuentes con FontForge,


Solucionando problemas de Interlineado
En ocasiones cuando trabajamos en proyectos que requieren el uso de fuentes
específicas y quizás un poco fuera de lo común, nos podemos topar con algunos errores.
Hace un tiempo usando la fuente «bellerose» me encontré con un error de interlineado.
Después de buscar mucho sobre cómo editar fuentes, llegué a FontForge un editor de
fuentes gratuito, con funciones increíbles para solucionar los problemas con nuestras
fuentes personalizadas, en cualquier proyecto de diseño y desarrollo web.

Error de interlineado en fuentes.

Si estás leyendo esto, quizás ahora mismo tengas este error molesto y estés intentando
diferentes soluciones para «medio tapar» este problema. El asunto es que por más que
agreguemos espacios, márgenes y demás… Sigue siendo imposible centrar nuestra
fuente.

Para identificar si estás teniendo problemas con el interlineado, debes tener algo así:

En mi caso, ya  había probado todo para poder centrar la fuente, y aunque puede
funcionar, no es lo más «elegante» del mundo. (A menos que seas de esos diseñadores
que tapar los errores con soluciones a medias). Pero sé, qué tú, no eres así. 😉

Solucionando problemas de interlineado en nuestras fuentes, con FontForge.

Cómo comente al inicio de este post, FontForge es un editor de fuentes increíble y


completamente GRATIS. Nos permite editar nuestras fuentes de forma fácil y elegante.
Con muchas opciones al momento de exportar, entre otras cosas.

Sin más largas, veamos cómo editar nuestra fuente con FontForge, paso a paso.

Paso 1: Debemos (obviamente) tener la fuente en nuestro ordenador y el software de


FontForge en nuestro ordenador. Puedes descargarlo desde acá disponible para Mac,
Windows y Linux.

Paso 2: Luego de descargar e instalar FontForge, debes ejecutarlo, verás una pequeña
ventana, donde puedes buscar la ubicación de tu fuente y abrirla.
Paso 3: Vamos a elementos, atributos de fuente.

Paso 4: En configuraciones generales, prestamos atención a los valores: Ascend y


Descend. Te recomiendo apuntar estos valores, los usaremos en el paso siguiente.
Paso 5: Vamos a la opción OS/2. En esta pestaña vas a encontrar diferentes campos
para configurar nuevamente valores Ascend y Descend. Agrega los mismos valores
vistos en general. En Typo Descent solo cambia el valor a negativo.

El campo interlineado déjalo en blanco.

En este punto, si tienes dudas o quieres profundizar un poco más, te recomiendo ir


directamente a la documentación de FontForge, disponible acá.

Paso 6: Estamos por terminar! Antes de exportar la fuente, es recomendado validarla.


Puedes hacer esto desde: Elemento -> Validation.
En ocasiones, puedes encontrarte con algunos errores, por algunos caracteres que seguro
nunca usarás… En ese caso, recomiendo eliminarlos o si eres un manitas, lee la
documentación y realiza la corrección. (Pero no creo que tu cliente escriba en
jeroglíficos).

Paso 7: Tranquilo, ¡Hemos terminado!. Solo debes ir a: Archivo -> Exportar fuente.
Selecciona el formato TrueType, selecciona carpeta destino, y voilá, ¡A probar la
fuente!.

✏ Tipos de letra TTF

Las fuentes tipográficas se pueden dividir en 4 grandes familias:

1-Serif (con serifas)

Son las tipografías con pequeños trazos, remates o adornos en los extremos de las
líneas o, más comúnmente, en el pie de letra. Son más usadas en formato impreso que
en diseño web.

Algunos ejemplos de fuentes con serifas son la Times New Roman, Georgia,
Garamond y Curier.

2-Sans serif (sin serifas)


También llamadas “de palo seco”, son las más utilizadas en el diseño web por ser más
limpias y claras y facilitar la lectura (combinan bien con los colores planos y el flat
design). Las hay redondeadas y geométricas.

Las fuentes sans-serif se dividen a su vez en cuatro grandes grupos:

1. Grotescas: Franklin Gothic.


2. Neo-grotescas o de transición: Helvética o Frutiger.
3. Humanistas: Optima, Gill Sans, Verdana, Calibri o Tahoma.
4. Geométricas: Gotham o Futura.

3-Script

Son las fuentes barrocas, caligráficas o manuscritas, a menudo en cursiva,


bastardilla o itálica. Pueden ser elegantes, siempre y cuando no se abuse de ellas. Por
lo general, se usan en blogs y páginas web de bodas, además de en invitaciones.

Ejemplos de tipografías script son la Mistral, Vivaldi o Valentina JF.

4-Display

Son tipografías rotundas, gruesas y de grandes trazos, que se reservan para banners,
billboards y carteles publicitarios.

Ejemplos de fuentes Display los encontramos en las fuentes Broadway, Stencil o


Rockwell.
✏ Fuentes tipográficas con acabado profesional

Reconozco que esto es un poco subjetivo, como que te gusten las fuentes con serifas o
sin serifas, pero algunas de las tipografías gratuitas que veréis en muchas páginas
web y que vosotros también podéis usar en vuestros proyectos libremente dándoles
un aspecto elegante y profesional son:

 Bahamas
 Caviar Dreams
 Comfortaa

 DejaVu Sans
 Existence
 Folks
 Liberation Sans
 MadAve

 Montserrat
 Nexa
 Nixie One

 Poppins

 Roboto
 Sansation

Y en cuanto a las tipografías manuscritas, caligráficas o artísticas, éstas son mis


recomendaciones:

 Allura
 Arabella
 EdmondsHand
 Indie Flower
 Lebanon
 LeftyCasual
 SantElia Rough
 Sonsie One
 Summer Font

Usando fuentes .otf en navegadores web


Estoy trabajando en un sitio web que requiere pruebas de fuentes en línea, las fuentes
que tengo son todas .otf

¿Hay alguna forma de incrustar las fuentes y hacer que funcionen en todos los
navegadores?

Si no, ¿qué otras alternativas tengo?

htmlcssfontsfont-face
364
14 jul. 2010Naruto

Puedes implementar tu fuente OTF usando @ font-face como:

@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path/GraublauWebBold.otf") format("opentype");
}

Sin embargo, si desea admitir un gran variedad de navegadores modernos le


recomendaría cambiar a los tipos de fuente WOFF y TTF. El tipo WOFF se implementa en
todos los navegadores de escritorio principales, mientras que el tipo TTF es una
alternativa para los navegadores Safari, Android e iOS más antiguos. Si su fuente es
libre, puede convertirla utilizando, por ejemplo, un onlinefontconverter .
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"),
url("path/GraublauWebBold.ttf") format("truetype");
}

Si desea admite casi todos los navegadores que aún existen (no es necesario IMHO),
debe agregar algunos tipos de fuentes más como:

@font-face {
font-family: GraublauWeb;
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /*
IE6-IE8 */
url("webfont.woff") format("woff"), /* Modern Browsers */
url("webfont.ttf") format("truetype"), /* Safari, Android,
iOS */
url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS
*/
}

Puede leer más acerca de por qué se implementan todos estos tipos y sus trucos aquí .
Para obtener una vista detallada de qué tipos de archivos son compatibles con los
navegadores, consulte:

Compatibilidad con el navegador de font-face

Soporte de navegador EOT

Soporte del navegador WOFF

Soporte del navegador TTF

Soporte para el navegador de fuentes SVG

espero que esto ayude

621
14 jul. 2010
choise

Desde el Directorio de fuentes de Google ejemplos:

@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://example.com/tangerine.ttf')
format('truetype');
}
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
Esto funciona en todos los navegadores con .ttf, creo que puede funcionar con .otf. (
Wikipedia dice .otf es mayormente compatible con versiones anteriores de .ttf) Si no,
puedes convertir .otf a .ttf

Aquí hay algunos buenos sitios:

 Buena imprimación:

http://www.alistapart.com/articles/cssatten

 Otra información:

http://randsco.com/index.php/2009/07/04/p680

Cómo reemplazar un carácter en una


fuente con otro carácter

Tengo una fuente en formato TrueType y OpenType que realmente me gusta. Me


gustaría reemplazar un carácter en esta fuente con otro carácter. Específicamente, me
gustaría hacer que los guiones bajos parezcan espacios. ¿Cuál es la forma más simple y
eficiente de hacer esto?

fonts  software-recommendation 
— Lucian
fuente

¿Has investigado el software de edición de fuentes?


— Scott

He buscado un poco, pero el problema que tuve fue que ni siquiera sé qué necesita para poder
cambiar los caracteres o cómo se llama esa característica.

Solo como referencia para mí y para otros: también hay un editor de fuentes gratuito llamado
BirdFont además de FontForge

Respuestas:
5

Bueno, no sé el contexto en el que lo está utilizando, pero la forma más fácil de hacerlo
es simplemente usar un espacio en lugar de un guión bajo o encontrar una fuente que
pueda usar para ese carácter específico y luego volver a su estado normal fuente.

Ese es el camino fácil. Y tiene más sentido si está usando esto en una configuración
gráfica, pero en una configuración de texto basada en contenido pesado con mucho
contenido y muchos guiones bajos, es posible que tenga que tomar la ruta más difícil.

La respuesta complicada es editar la fuente usando un programa de edición de fuentes.


Hay algunos gratuitos que vale la pena revisar, como Font Forge, que funciona en todos
los sistemas operativos, o algo así como Font Constructor, que está basado en Mac
(nunca lo he usado, pero he escuchado cosas buenas de la gente de Mac). Personalmente
uso Font Forge porque es gratis, pero hay herramientas muy potentes (y caras) como
FontLab y FontCreator . La desventaja de ser libre es que Font forge es bastante difícil
de instalar y si le temes a la línea de comando puede que te sientas incómodo con el
proceso. Sin embargo, si eres experto en tecnología, es posible que puedas seguir las
instrucciones fácilmente.

Una vez descargado, deberá cargar su fuente, asignar el carácter de subrayado a un


carácter en blanco para representar su espacio, y luego reempaquetar la fuente para
poder usarla.

Recomendaría encontrar una solución fácil para evitar el laborioso proceso de edición
de la fuente, pero si es inevitable, es posible que haya tomado los pasos para editar el
carácter de la fuente manualmente.

También podría gustarte