I'm developing a calculator app in HTML5 that needs to print some math symbols like the square root and pi, but the problem is that these symbols aren't defined in most webfonts, so they will appear in the default font, which looks just horrible in comparison to the rest of the input. Is there any webfont (preferably on Google Fonts), that has good support for mathematical symbols?
It's probably a bit too late to answer for OP, but for anyone else who finds this post: OP asked for a Google Font that is good for math, I've just been trying all fonts on Google Fonts with a sample of math symbols as seen below.
I've filtered only those that can also be used in Google Docs, meaning expecially a few very nice Noto fonts are missing from the results. Noto Sans Symbols seems to be a subset of Noto Sans that is included only on Google Docs.
This yields the 8 fonts shown below, of which only M PLUS seems to have its own implementation for all my test characters including ∛ and ℂ.
At the time of posting, this can be found here.
The best way is to use this js library (font)
https://www.mathjax.org/
You can find samples for use on the page.
The font stix-two-text is now availible on google fonts here. If you look on the google fonts page it looks like it has only a few symbols but if you open up the actual fonts google links it seems to have the full STIX font in ttf form.
Related
I'm learning HTML and CSS together to break into the world of programming, and this is the first real problem I've run in to that I can't figure out on my own. Of course, it's a process that can be mindlessly replicated, but I want to understand why it works the way it does.
Currently, I'm learning to link fonts, specifically from google fonts, to expand the resources I have to make a website. The piece of code I'm given is <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">. From what I understand, this tells the html document to reference the listed website when an instance of "Abril Fatface" comes up. My question is: how does the computer know to reference the website when I specify in the styling that I want "Abril Fatface"? In other words, how does it know what to call it?
You are just including a css file, if you open it, the name is in the property font-family. In this case:
font-family: 'Abril Fatface';
I'm sure someone can break this down even better than I, but a quick search of use google fonts in css gave me this Getting Started guide from Google.
Here are some highlights:
Add a stylesheet link to request the desired web font(s):
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Font+Name">
Style an element with the requested web font, either in a stylesheet:
.css-selector {
font-family: 'Font Name', serif;
}
What I understood from this is that the Google Font API has a font family parameter where each word in the font family name is separated by a + symbol. The CSS font-family property accepts values as provided and will even accept multiple values. Fortunately, Google's API lets you provide multiple font families if you separate them with a pipe symbol | like so:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
This is mostly an explanation of why it works. If you want to dig deep into the how, Google also has documentation explaining their API. However, if you are brand new to web development, this might be a bit much.
TL;DR It might be enough to know that the API provides font family information from its servers to your page using formatting known as "JSON" or (J)ava(S)cript (O)bject (N)otation. JSON is a relatively simple way of storing and transporting various combinations of data on the web.
If you want to better understand JSON and APIs, I highly recommend digging into FreeCodeCamp's curriculum. I've personally learned a lot there.
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.
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 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.