I'm using the webfont service of fonts.com to include webfonts to my site. However, the publishing options of this service are not sufficient enough in my case. What I want is to be able to declare the font-weight and font-style for every font that is loaded. This way, I avoid getting faux bold or italic styles if for some reason the webfont can't be loaded. You can find more on this topic here: http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles
I then stumbled upon the Google Webfont Loader and tried to use it to solve my problem. However, I can't figure out if and how I'm able to set font-weight and font-style for a loaded font.com webfont. Any ideas?
PS: I'm aware that there is a self-hosting option at fonts.com which would easily solve the problem, but that's a pricey option :)
Related
I'm using Atom 1.45.0 x64 on Linux Mint19.3 Cinnamon to learn basics of web development (I'm following a course of html5, CSS and JavaScript).
I have 2 problems (probably related to each other):
whenever I type the 'font-family' command in my .CSS file the only input suggestions I get are the ones you can see in the screenshot I uploded here. No way to specify other fonts;
whenever I choose one of the available options, the fonts in my html page won't change (and it's not because of typos, bad linking between html and css files, etc).
fonts currently available on my Atom
I haven't been able to find a solution to this problem and I can't figure it out on my own because I'm not an advanced user of Linux systems. I've also installed the 'fonts' package on Atom but that hasn't solved the problem.
Any suggestion?
It seems the problem affects Atom. Try to change from font-family to font-style and declare the value. So instead of doing font-family: italic try typing font-style: italic;
Found similar problem here, even if it's using Windows 10: https://discuss.atom.io/t/why-cant-i-change-the-font-problem-solved-the-answer-is-inside/21086
Comment if can't resolve.
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 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.
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.