I currently have a webpage which uses 2 font files and a lot of images
i have optimized the images to an extent, but my page still loads very slow,
next option was to optimize the font files
I am using Diavlo font for the logo , the size of the font file is 55kb.
i have read that Google fonts by specifying a text= value in your font request URL.
This allows Google to return a font file that's optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.
#font-face{
font-family:'diavlo';
src: url('diavlo_medium_ii_37-webfont.eot');
src: url('diavlo_medium_ii_37-webfont.eot?#iefix') format('embedded-opentype') ,
url('diavlo_medium_ii_37-webfont.ttf') format('truetype');
}
I did not find Diavlo in Google Fonts.
Google fonts
http://fonts.googleapis.com/css?family=Inconsolata&text=Hello
So is there a way i can provide only the text i require to get a minimal .ttf file
and should i include either .woff file or .ttf or both.
If you know which characters you need specifically, you can use Font Squirel's #font-face generator and specify only which characters you want, this is the only way i know of doing it. This will generate the needed font files, with only the characters you want.
Note: make sure you have it set to expert mode
Related
I have seen a couple of projects where they just mention the name of the fonts they want to use in the CSS file without any mention of the source or the TTF or other font files.
eg
code {
font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}
When I remove those fonts via CSS in inspect element I can see the fonts are changed. So the code works. But I don't understand how the browser figures from where the fonts should be downloaded.
The code works even in incognito so not sure if the browser caching the font is a valid explanation.
Notice that the last setting in the font-family list is sans-serif.
If the local system has absolutely none of the other fonts loaded locally then the system will use whatever it has set as its default sans-serif font.
That is why it looks as though 'it works' when you say this:
#Fabrizio Calderan loves trees I checked the system fonts with this css-tricks.com/snippets/css/system-font-stack link. But the mentioned font family is not matching any of the fonts in the system fonts. So the default font should be picked right?
You are right, it picks the default font, but the version that is sans-serif.
As you can see in the above picture,I created a sample.html file and used the font-family for the body tag. So the source provided does not mention in font-family section. in the result, fonts will load from "Fonts" folder in my windows folder. (Of course if you use Windows OS and website locally, mentioned process will be happen!)
There are several ways the browser decides what fonts are downloaded/used:
As user 'Fabrizio Calderan loves trees' stated (paraphrased):
If no sources are provided, they are loaded from the computer running the webpage in a browser.
The programmer uses external APIs or links that embed a font. An example of this is Google Fonts, which lets programmers choose fonts they want (and select them), and embed them using either a <link> tag (put into HTML code) or #import tag (put into CSS file).
The website you are looking at may contain #font-face statements in their CSS, which links a common name (i.e., 'Source Code Pro') to a font file. You can read more about #font-face here and here.
If you can't find evidence of any of these, could you possibly share a link to the webpage's source code?
EDIT
I took a look at the code in the website. It seems like the fonts styling in the display/textarea is:
.displayArea{
font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;
}
And, there doesn't appear to be a source of these fonts, so it is part of the 1st category I listed above. Basically, the fonts in quotes are fonts that may be used if already preinstalled inside the client's computer, if not, the browser goes down the list and keeps checking whether the client has the font installed. The ending font is sans-serif, which is a default font that all computers have, so it serves as a backup in case all other fonts aren't available.
I am trying to use a font for a website. The typeface file is being loaded in correctly (I can see the file in my network tab), however it is not displaying correctly. I have used font-face to import the fonts, with the following styling rules below,
#font-face{
font-family: 'BwGradual-Thin';
src: url('../fonts/BwGradual-Thin.otf') format('opentype'),
url('../fonts/BwGradual-Thin.woff'),
url('../fonts/BwGradual-Thin.eot');
}
#font-face{
font-family: 'BwGradual-Regular';
src: url('../fonts/BwGradual-Regular.otf') format('opentype'),
url('../fonts/BwGradual-Regular.woff'),
url('../fonts/BwGradual-Regular.eot');
}
I have attached 2 screenshots below, the first of the network tab of with the correctly loaded typeface file, which shows how all characters should be displayed on with the font. The second screen shot is how the font displays on the website. Only the 't' character has is displaying correctly.
Dev Tools Network Tab
Heading Screenshot
Any assistance would be greatly appreciated.
I am still unsure as to why the method above does not work, however I have got the font to display correctly. My solutions was;
Replace .otf files with .ttf (Converted using CloudConvert)
In font face, declare all fonts as the same family, .i.e. font-family: 'BwGradual' and then declare the font weight of each type. i.e. 100,200,400,etc
Set -webkit-font-smoothing:antialiased. (This was not workign with .otf file types.)
Very specific question so, not sure if useful for later uses, but hope it helps.
First, I want to mention that the icon fonts are not freely available ones. We actually purchased them.
I have a SCSS file that is making references to some icon fonts. I get most of it but not sure what the seemingly hexadecimal values mean.
$icomoon-font-path: "../fonts" !default;
$stream-check-1: "\e62f";
$stream-check-circle-1: "\e634";
I then seem to have CSS classes that reference these values:
#font-face {
font-family: 'myicon';
src: url('#{$icomoon-font-path}/streamline.eot?l1dykt');
src: url('#{$icomoon-font-path}/streamline.eot?l1dykt#iefix') format('embedded-opentype'),
url('#{$icomoon-font-path}/streamline.ttf?l1dykt') format('truetype'),
url('#{$icomoon-font-path}/streamline.woff?l1dykt') format('woff'),
url('#{$icomoon-font-path}/streamline.svg?l1dykt#streamline') format('svg');
font-weight: normal;
font-style: normal;
}
.myicon-check-1 {
&:before {
content: $stream-check-1;
}
}
I think I get most of it. My question is where do I get those hexadecimal values e.g. e62f?
UPDATE:
I've located some json files that are zipped up in file that mentions icomoon. Would these json files be of any help in this case? They look like this:
"\e62f" is CSS syntax for what would be in HTML: a character with hexadecimal code e62f. You can see the code-to-glyph mapping by inspecting your font file (the way to do this will differ based on what OS you are using).
I think I found the right solution here. It's an online font viewer and when I click on the font, it shows the assigned value.
Just drag and drop the font file and
it shows you the fonts and their values.
http://jsfiddle.net/iegik/r4ckgdc0/
Those are utf-8 icons. You can check them here.
For further lookup, check this.
That e62fis actually referring to the utf-8 encoding of characters. The HTML takes that "code" and turns it into a letter depending on what encoding you have. Most American websites I know of are just the utf-8
In your case, your webfont has replaced some of the normal values in order to use their own version of it. However, you might not be able to find the exact list of what other codes there are in this font as it's an Icomoon font (it appears to be) - which allows people to make their own webfont.
EDIT:
So if you have the font downloaded and have a mac - open up your Font Book Application. From there, find your font and look at all the characters. Choose the character you are looking for and copy it.
Go to a tool like this website: http://r12a.github.io/apps/conversion/
And paste your character into the green convert area.
The value that you are looking for will be in the css box! (Of course it will show up as a box on this site, but as soon as you use that code on a site where you have the font downloaded - you'll see it match what you saw in Font Book)
I was able to reproduce this with my own custom font - so I was able to make it work. This was a great question and helped me find a tool that I'm definitely going to book mark! Cheers!
I'm seeking to optimize the speed of my site and want to know of browers would only load the file they need from the following code or all font files:
#font-face {
font-family: 'Proxima Nova';
src: url('proximanova-regitalic-webfont.eot');
src: url('proximanova-regitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('proximanova-regitalic-webfont.woff') format('woff'),
url('proximanova-regitalic-webfont.ttf') format('truetype'),
url('proximanova-regitalic-webfont.svg#proxima_nova_rgitalic') format('svg');
font-weight: normal;
font-style: italic;
}
Also, is this the most optimal way of doing #font-face? Are there any other strategies to reduce load time for the users?
A typical browser should attempt to load the fonts in the list one by one, depending on what format it supports, starting from the first in the list. Once it obtains a font file that it can use, it doesn't attempt to load any of the rest of the files in the list. If a browser doesn't support a particular format, it should never attempt to load that font; it should move straight on to the next source and looks at that.
This is similar to how a browser uses a font stack in the font-family property.
Of course, not all browsers behave conformingly to the spec. Some browsers like IE will try to download as many fonts as they can or parse the rule in unexpected ways; see the comments for more info and research.
CSS is already designed to help minimize the load time and number of requests through this sequential approach. If your fonts are taking too long to arrive from your own server, consider using a fast CDN instead like Google Web Fonts, Typekit or Adobe Edge.
To answer this question, I have cited relevant passages from the following W3C document:
CSS Fonts Module Level 3
W3C Candidate Recommendation 3 October 2013
(In the cited material, note that I have emphasized those sentences that are most pertinent to the question.)
4.1 The #font-face rule
The #font-face rule allows for linking to fonts that are automatically fetched and activated when needed. This allows authors
to select a font that closely matches the design goals for a given
page rather than limiting the font choice to a set of fonts available
on a given platform. A set of font descriptors define the location of
a font resource, either locally or externally, along with the style
characteristics of an individual face. Multiple #font-face
rules can be used to construct font families with a variety of faces.
Using CSS font matching rules, a user agent can selectively download only those faces that are needed for a given piece of text.
4.3 Font reference: the src descriptor
This descriptor specifies the resource containing font data. It is
required for the #font-face rule to be valid. Its value is a
prioritized, comma-separated list of external references or
locally-installed font face names. When a font is needed the user
agent iterates over the set of references listed, using the first one
it can successfully activate. Fonts containing invalid data or local
font faces that are not found are ignored and the user agent loads the
next font in the list.
...
External references consist of a URL, followed by an optional hint
describing the format of the font resource referenced by that URL. The
format hint contains a comma-separated list of format strings that
denote well-known font formats. Conformant user agents must skip
downloading a font resource if the format hints indicate only
unsupported or unknown font formats. If no format hints are supplied,
the user agent should download the font resource.
/* load WOFF font if possible, otherwise use OpenType font */
#font-face {
font-family: bodytext;
src: url(ideal-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("opentype");
}
I'm about to use some custom fonts for my website.
I know that currently there are few websites providing free webfonts like: Google WebFonts
But, the font I want isn't there. I want to know if there is any way to convert this font that I have to a webfont. (my font extension is TTF)
Also, I downloaded a few webfonts, their extension was also TTF. Are webfonts something different?
Different browsers handle webfonts differently. TTF will work in most browsers but not IE or on iPhones. I'd recommend checking out Font Squirrel as it has a lot of fonts on there including a #font-face generator that will help you set things up.
Web fonts are nothing special; they can be TrueType fonts, as long as the browser supports that format (most do). To use a TrueType font in your CSS, use
#font-face {
font-family: {given name};
src: url({path to font file}) format('truetype');
}
Then use
font-family: {given name};
in any rules you want to use the font for.
I've previously used Font Squirrel to generate the web font files from a ttf.
I would recommend trying Cufon as a fallback for browsers that don't support css #font-face
You can just use the ttf files in combination with #font-face. See http://www.html5rocks.com/en/tutorials/webfonts/quick/ for more information.
This might be of use -
make sure the license for the font you are using allows it though.