Let's say you buy webfont on MyFont for use on your website. For example URW Geometric Webfont (https://www.myfonts.com/fonts/urw/geometric/licensing.html).
Naturally you want to display it consistent on all browsers and devices. Webfonts tipicaly look great on MacOS (in all sizes), however there is a different story with Windows. Some characters (like “e”, “d”, “b”) seem to be larger than other characters. See hinting difference - before and after autohinting
I found solution for this issue called autohinting. The process goes like this:
You take .ttf file and apply autohinting to it - replace the existing hinting with the autohinting information. I used tool “ttfautohint”: https://www.freetype.org/ttfautohint/
Next step is to generate other font formats from auto-hinted .ttf file. I used tool https://transfonter.org/
Is this process in accordance to licensing agreement?
It states following:
“You agree not to adapt, modify, alter, translate, convert, or
otherwise change the Licensed Web Fonts, or to create Derivative Works
from the Licensed Web Fonts or any portion thereof."
Source: https://www.myfonts.com/viewlicense.php?lid=1630
I didn’t change font in any way, I just applied to it autohinting information hence better webfont display on Windows.
Related
I am working on a website that is mainly in Chinese language but has Japanese phrases and sentences scattered all around. It is important for me to maintain an overall unified style in fonts, while at the same time be very careful about the way Japanese characters are displayed. That is, I am not allowed to simply substitute these Japanese characters with their close counterparts in Chinese. To this end, I am currently using different custom fonts for Chinese and Japanese separately. These are visually similar OTF fonts specifically designed for Chinese or Japanese only. I load them through the CSS #font-face command. However, these .otf font files are several MB's large and take seconds, even up to minutes to load. Moreover, this happens for every new web page the viewer opens. I am wondering if there is a faster way of loading these fonts. Your help is much appreciated!
(Warning: I am a beginner.)
P.S. My website caters to mainland Chinese viewers so google fonts might not be a good solution here.
You could use WebFontLoader for improving performances of #font-face. It's developed by Google and Typekit. You can use it with their services and also for self hosted fonts.
Include fonts in css using #font-face, as you already did.
#font-face {
font-family: 'My Font';
src: ...;
}
#font-face {
font-family: 'My Other Font';
src: ...;
}
Add this code to the bottom of your main page, just before </body>
<script>
WebFont.load({
custom: {
families: ['My Font', 'My Other Font']
}
});
</script>
I ended up using the "dynamic subsetting" functionality provided by Adobe Typekit. It dynamically generates font files that only include characters used on the webpage, and sends it via its content delivery network. All I needed to do was to make an account, select fonts form their website, and include some codes for external javascript files in my HTML. One downside of this method is that I can no longer use my own fonts, and the range of Chinese/Japanese fonts provided by Adobe Typekit seems limited. Luckily I was able to find the fonts that suit my need. Also I still experience a certain degree of FOUT but I suppose it's not a big deal for me at present. Still hoping for an open-source solution in the future, though.
I am currently working on a responsive page which uses unicode symbols on certain elements and I would like them to have the same "look". As I understand, each browser and each operating system have different fonts for unicode symbols, and I noticed that the font-family property was not helping.
My biggest problem right now is that all the unicode symbols that I use show up as colored emojis on smartphones, which often ruins the page's design. Is there any way to fix that? Am I missing something?
The answer to your question can be split into two:
How to not worry about client-side fonts: web fonts
How to use emoji/pictograms without browser changing the rendering: css icon font
The latter part is more relevant as you are specifically dealing with emoji.
Web fonts
Web fonts would solve the cross-system compatibility issue. These are fonts that are served to the browser. Google fonts is a good place to start —it is actually weird to see how much of the web uses them.
If your unicode is more than just Greek or CJK and uses, say, runes, you will need to make your own web font (which is easy, Googling gives many web servers and guides), which takes advantage of #font-face rule (wiki). One serious drawback to the latter is that there is a copyright problem if you use a font you found on some depository or on your machine, so that is something worth looking out for.
Icon font library
An icon font library is a stylesheet library (with a font) that inserts an icon after an empty element with a class named for that icon, e.g. in FontAwesome <i class="fa fa-hand-spock-o"></i>.
As emoji are a recent addition and the support is more than patchy, websites and browsers add the support themselves, often coloring them (e.g. Chromoji extension). Consequently, I strongly suggest using an icon font library.
I am partial to FontAwesome —e.g. an academic tool of mine—, but there are loads of other options, some are:
Bootstrap's Glyphicons
Typicons
Fontello allows a mishmash of various icon font libraries (a longer list can be found there).
If however, the icon you are looking for is absent, you can create an icon font library using one of the many web resources (eg iconmoon.io). For the images themselves, flaticon has large collection of icons that can be converted to a icon library, which saves you time from having to slave away in illustrator.
I am putting together a tutorial (in .html) on how to use GeoGebra, and I would like to have a css style for the text in my tutorial that will be GGB commands. I would like this to match what GGB uses in its input lines. In other words, I would like the text in my lessons denoting GeoGebra input to look identical (in font, size, etc) as the input when using GeoGebra.
Is there a way (in my css file, or in the header of each html file) that would automatically grab the right font that the current release of GGB uses from GGB's repository on github?
They appear to currently be using unmodified (maybe just stripped of unused characters?) versions of Roboto and Roboto Slab (specifically the regular weights of each), which you could use through Google Fonts. Downloading and opening 'Geogebra Serif Regular' from their GitHub repo opens a font file literally just named "Roboto Slab".
You may be able to hotlink to their github files for their sans and serif fonts, though if you are selling these tutorials it appears that you might be in violation of their license, were you to use these exact files.
Seeing as they seem to move their fonts around a fair bit in their folder structure, and rename the files occasionally, I don't think that there is a guaranteed method to pull "whatever font they happen to be using" from their GitHub in any sort of futureproofed way -- if you hardcode those above links, your own fonts may (and eventually will) spontaneously stop working whenever they decide to shunt folders around.
I surmise that the easiest way for you to match their look-and-feel for the near future would be to simply use Roboto / Roboto Slab via Google Fonts.
AFAIK, these are the only fonts they use in the app.
I need to include Gurmukhi.ttf font which was provided to me. I tried to find answer to my question but found something like this #font-face : converting and displaying a font (CityBlueprint) but no solution.
At first I tred to generate the font on this site
http://www.fontsquirrel.com/tools/webfont-generator
but got the following error "The file gurmukhi.ttf is blacklisted by the Generator. Webfonts from other distributors cannot be regenerated."
Then I used
http://www.font2web.com/
It generated the required data package and I included fonts, how it was shown in demo.html. But nothing happened. By default the browser uses its own fonts, and Gurmukhi are ignored. Interesting thing is that font in demo.html is also ignored by browsers.
Then I was provided another font type Optima.ttc. I have converted it to ttf format.
http://www.fontsquirrel.com/tools/webfont-generator
"Linotype has requested that their font Optima Regular be blacklisted by the Generator. You will not be able to convert this font."
http://www.font2web.com/
Here I only got 2 files and in info.html there was the following:
Sorry, the vendor of Optima nova Regular doesn't allow us to convert this font
But click here to use the Optima nova Regular web font for free
Tip: Click on the purple Sign Up for Free! button and then click on the FREE PLAN link
As I understand both of these files are not free?
This are commercial fonts and you need to purchase atleast the web license in order to use them legally (altough you could always make the .ttf conversion yourself locally without using web generators and avoid the blacklisted check, but this is still not a legal solution and the font is still subject to copyrights).
If you don't have the budget to spend on font license, you could always use a free alternative to Optima Nova - there are similar typefaces available for free - try to search for free alternatives that could suit your design (mind that the alternative font may not be of the same quality and may not support as many glyphs).
quick question, I'm currently trying to style a font to resemble the letters pictured below. Before I proceed any further I just wanted to be sure there wasn't already a standard, web-safe, font that resembles these letters. I'm not familiar with font design terminology, so I'm not sure what the technical description of the letters below would be. Thanks much.
I don't think there is a standard pre-installed web font (Like Arial, Times ....) out there that is this bold. Under some circumstances, you can force super-bold text using the font-weight property but cross-browser support is very shaky, and the font needs to support the boldness.
Google Web fonts has the Coda font which seems to come pretty close. Maybe that is an option?
Your other option is to use #font-face technology (which Google Fonts also uses) to provide your chosen font to your users. Google it - there's a wealth of material.
The only snag is that you must have a licence that allows you to put the font on the web (but fortunately lots of fonts can be licenced that way now).
Fontsquirrel.com is a good starting point.