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.
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 have been using Calibri font in my web pages for too long using #font-face but the thing is including such big font file reduces web page loading speed drastically! But I have seen that a font in ttf format is more bigger than the one in opt or open-type format (Am I right or not?). That's why I want a font converter. Can anyone provide me a one or can give me a link to get it. Please help me out.
Thanks in advance!
I've been having wonderful success using Google's Web Fonts They don't give you a a million options font-wise, but they're loaded off of Google's screaming fast CDN which undoubtedly will deliver them much faster than 99% of the hosting solution us mere mortals have access to. Since they are served from the edge off a different host than the rest of your content, the load advantage should be quite impressive.
As easy as it is to find a font, copy, and paste, I've had little reason to fight with anything else.
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.