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.
Related
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 am want to use a font that is not popular. this font exist in google fonts and also in Photoshop. I am confused because both ways will have some loading time, I know that images are not the good way to go for texts (but at least the image will be internal), however google font will introduce some overhead as the font will be requested from an external source
which method has good performance (in terms of load speed):
1) using Photoshop to write the text and save it as an image than use the image in my webpage? or
2) using google font?
3) and if using google font. do i have to download the font file with all formats and then put it in my website folder? or I just use the html link tag to? which one is more efficient.
and thanks a lot in advance.
Google fonts are CDN, so they take up zero of your server resources (while images do). That said, Google fonts can slow down your page. But typically only when you're using a handful of fonts. I wouldn't be concerned at all with 1 or 2. Overall, either method would be little to no concern in the end.
However, using images for text is a flash back to 1998. Bad practice. More so on your end, as updating text, changing design, running A/B tests, accessibility, SEO, and maintaining the site in general will become a major pain in the a**. Simplest answer? Avoid it.
Directly from Google Fonts site:
Tip: Using many font styles can slow down your webpage, so only select
the font styles that you actually need on your webpage.
Tip: If you choose only the languages that you need, you'll help
prevent slowness on your webpage.
Example usage:
// include in the <head/> of your website
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
then:
// in your css:
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }
Done. Very little resources.
Use google fonts.
The Google Fonts CDN is built to deliver content, content loaded from it will probably load faster then it would if it was on your server.
You don't have to download the font, or worry about browser support, simply add the <link> tag to your HTML.
You should NOT use images to display text, for several reasons:
Screen readers can't read text in an image
Size. Depending on the size of the image and font, the image may be larger than the font file.
A major pain to update
UX problems. i.e. Users can't copy text, select, etc.
When should you use images?
When you need a text effect that can't be achieved with CSS, SVG, or canvas(Not that many). As noted by #Stephen P in the comments below, you should still add text, just visually hide it with CSS
You can download google fonts .ttf file or whaterver format you like or supports and call that file instead of accessing from a url. Which will be much much faster. And yes images are truely bad as it makes impossible for search engine to read.
I am using HTML2PDF and so far am having great results. I have stumbled upon a problem that I am wasting lots of time trying to solve.
I am using HTML2PDF v4.0 and I have managed to set the default font for my PDF's to a ttf font that I converted (into 3 files, .z .php and .ufm) These files were placed into the TCPDF fonts directory and the system recognizes them and the final PDF is generating with the correct font.
Now, the style guide I am working from specifies 2 different fonts. I need to use ANOTHER ttf font (also converted and placed into the TCPDF folder and verified by setting it as the default font)
I am having trouble finding a strategy for implementing this scenario into HTML2PDF. I am about to go down the road of splitting the ob_start() buffering into sections for each required font, then re-setting the font between outputs. A simple CSS class would be so much easier but I am unable to get this to work as expected.
After half a day of head scratching over this I managed to finally get it to work.
I have converted both of the ttf fonts using the web utility I mentioned in the question above. Then I was able to set a default font for the whole page using
$html2pdf->setDefaultFont("helvetica45light");
Then when I need to use the other font I just set an inline style similar to the following
<span style="font-family:helvetica65medium">some text here</span>
I went 1 step further, and created the classes as I was originally hoping for.
<style>
.helvetica65medium{
font-family:helvetica65medium;
}
.helvetica45light{
font-family:helvetica45light;
}
</style>
now I can just set the class of the text that I want in either of the defined fonts.
I guess I will count that as a lesson learnt
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.