I try to load fonts via CDN, but requirements for a font do not have that. We are using Montserrat Light in some areas and my preference per Google fonts doesn't allow for the 'light' version. Instead, I found it HERE, but no CDN capability. So how do you all deal with this for your users without having them having to download or whatever. Looking for suggestions?
Thanks much.
A CDN is just "someone else's site" that you use for efficiency reasons. If no CDN is available, the obvious choice to put the data for online retrieval is "the same place you've put the rest of your website": just like how you have .html and .css files sitting in directories that are accessible to the outside world, you add your font file(s) in similar fashion and then just load them by relative URL.
Related
Basic question, I know I can either Download or link to a font, for example google fonts. Is there a benefit between choosing to link or download the font?
I am creating a web application with a few short paragraphs in RoR, but it's just a general question.
The only benefit I can imagine, is having a guarantee that your font will always be available if you download it and store it in your project directory. Whereas, if you link to a font there is a (rather low) possibility that the link will break in the future or something along those lines.
I've been using Font Awesome for a little bit on some of my projects and I have created a bunch of my own icons that I can link locally without a problem; however, I want to be able to link the icons I made from an online source like Font Awesome do and serve them publicly, how exactly is this achieved?
You need to have icon in SVG format that you have created,
then you can use this, it will generate all the necessary font types, CSS/Sass/Less/Stylus , HTML demo page and Name font according to your wish.
Gruntt Web Font
I did a bit of Googling for you to find somewhere for your to offer your files.
You will need to create a font from your SVG files, I use fontastic.me and it's very good, but you could use another service.
You will then need to create a package of your files, and put it on a CDN service so that other people (or just you) can use it publicly. You can try using something like https://www.jsdelivr.com/ or look into how to set up your own CDN.
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.
What I have:
I have a website consisting of a domain and two subdomains. My website is a WordPress multisite installation. The domain and subdomain websites each use the same WordPress theme that make extensive use of font icons.
What I need:
I need my font icons to display on the subdomain websites instead of diplaying as...
Font icons display fine on the main domain.
The problem:
My console log reveals:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://xxx. (Reason: CORS header
'Access-Control-Allow-Origin' missing).
My question:
Why would a website, theme and/or font icon behave differently on a subdomain than the main domain and how can resolve the matter?
This answer has started in the comments of the question. Sorry about that, but I won't repeat what I said there.
Ok, so I decided to put it as an answer, as I think passing info in bits and pieces via comments is not a good practice.
And speaking of practices, here's why you should add all your scripts and styles using wp_enqueue_script() and wp_enqueue_style() in WordPress.
The key behind WordPress's success is it's flexibility. Anyone can extend or restrain it, by adding or removing functionality to/from it. In doing so, a lot of people (namely plugin or theme authors, or even the DIY guy not knowing much about web, just trying out different cool scripts he found last night) at some point decide to use a certain asset. A font library, a JavaScript library or a CSS framework.
Most of these assets, if loaded multiple times are going to conflict with themselves, especially if different versions of them are loaded. And this is why you should always tell WordPress what you are using. Because if it finds out another plugin is using the same library, it will only load the asset once and provide it for every script/plugin or whatever else needs it.
That's the main reason. One of the secondary reasons, which applies in your case, is that if you decide to move this WP to another address, it's smart enough to dynamically rebuild the urls to its assets so they work in each installation.
And i'm only scratching the surface here.
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.