I'm attempting to use a local font for my Polymer Chrome App. I'm trying to use #font-face in CSS. Here's what I got:
#font-face {
font-family: 'robotolight';
src: url('../../assets/fonts/roboto-light-webfont.eot');
src: url('../../assets/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../../assets/fonts/roboto-light-webfont.woff2') format('woff2'),
url('../../assets/fonts/roboto-light-webfont.woff') format('woff'),
url('../../assets/fonts/roboto-light-webfont.ttf') format('truetype'),
url('../../assets/fonts/roboto-light-webfont.svg#robotolight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'robotolight_italic';
src: url('../../assets/fonts/roboto-lightitalic-webfont.eot');
src: url('../../assets/fonts/roboto-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../assets/fonts/roboto-lightitalic-webfont.woff2') format('woff2'),
url('../../assets/fonts/roboto-lightitalic-webfont.woff') format('woff'),
url('../../assets/fonts/roboto-lightitalic-webfont.ttf') format('truetype'),
url('../../assets/fonts/roboto-lightitalic-webfont.svg#robotolight_italic') format('svg');
font-weight: normal;
font-style: normal;
}
Then I use this font-face on an h1 here:
#CaseFiles-h1{
font-family: 'robotolight';
//font-weight: normal; <- no luck
//font-style: normal; <- no luck
}
Unfortunately, the font isn't loaded and I get some default serif font instead.
Any ideas?
I was hoping to keep the font local instead of using Google fonts or something like that.
You have to declate your #font-face outside of your Polymer object. Then you can use it in the polymer template.
<style media="screen">
font-family: 'robotolight';
src: url('../../assets/fonts/roboto-light-webfont.eot');
src: url('../../assets/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../../assets/fonts/roboto-light-webfont.woff2') format('woff2'),
url('../../assets/fonts/roboto-light-webfont.woff') format('woff'),
url('../../assets/fonts/roboto-light-webfont.ttf') format('truetype'),
url('../../assets/fonts/roboto-light-webfont.svg#robotolight') format('svg');
font-weight: normal;
font-style: normal;
</style>
<dom-module id="polymer-element>
<template>
<span style="font-familiy: robotolight">Hello</span>
</template>
</dom-module>
A blog post about that is here.
Look on Polymer's font-roboto linked definition. There are font-size defined in absolute measures like 100, 200, etc. Defining font-size: normal; is too rude. Some components may request absolutely or relatively measured font-size. So, try to define all corresponding font-sizes to match all possible requests, even if you won't include all font types (thin, light, medium, etc).
Also, I think you should fix robotolight_italic definition:
#font-face {
font-family: 'robotolight';
/* ... */
font-style: italic;
}
Related
I am using opencart 2.0.1.1 and the I want to use the roboto slab light fonr in my website for product name and heading of featured and latest blog. I take the link from google font and add it to my header.tpl that is <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700,100&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese' rel='stylesheet' type='text/css'> and also the css font family to add in stylesheet that is "robotoslab", serif; after applying it I found that the serif font is apply but robotoslab is not. Please help me in this matter and I am using Opencart 2.0.1.1 default theme.
This is done and the solution is add this css codes to your stylesheet `
#font-face {
font-family: 'robotoslab';
src: url('../fonts/robotoslab-regular.eot');
src: url('../fonts/robotoslab-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/robotoslab-regular.woff') format('woff'), url('../fonts/robotoslab-regular.ttf') format('truetype'), url('../fonts/robotoslab-regular.svg#robotoslab') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'robotoslab-bold';
src: url('../fonts/robotoslab-bold-webfont.eot');
src: url('../fonts/robotoslab-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/robotoslab-bold-webfont.woff') format('woff'), url('../fonts/robotoslab-bold-webfont.ttf') format('truetype'), url('../fonts/robotoslab-bold-webfont.svg#robotoslab-bold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'robotoslab-light';
src: url('../fonts/robotoslab-light-webfont.eot');
src: url('../fonts/robotoslab-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/robotoslab-light-webfont.woff') format('woff'), url('../fonts/robotoslab-light-webfont.ttf') format('truetype'), url('../fonts/robotoslab-light-webfont.svg#robotoslab-bold') format('svg');
font-weight: normal;
font-style: normal;
}`
and add all the fonts folder inside the theme of your root directory
I'm trying to add fontello to my site.
Im calling the font via the instructions with it and have used it before easily. However it just doesn't seem to be working.
Here is my CSS:
#font-face {
font-family: 'fontello';
src: url('fonts/fontello.eot?54081114');
src: url('fonts/fontello.eot?54081114#iefix') format('embedded-opentype'),
url('fonts/fontello.woff?54081114') format('woff'),
url('fonts/fontello.ttf?54081114') format('truetype'),
url('fonts/fontello.svg?54081114#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
I am developing a responsive web application. I encountered a problem that the font family doesn't work as expected on mobile, but it works as expected on a computer. Why is this the case?
Code:
HTML
<link href="css/fonts/fonts.css" rel='stylesheet' type='text/css' />
CSS
#font-face {
font-family: 'uni_sans_regularregular';
src: url('uni-sans-regular-webfont.eot');
src: url('uni-sans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-regular-webfont.woff') format('woff'),
url('uni-sans-regular-webfont.ttf') format('truetype'),
url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_lightregular';
src: url('uni-sans-light-webfont.eot');
src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-light-webfont.woff') format('woff'),
url('uni-sans-light-webfont.ttf') format('truetype'),
url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_bold_italicitalic';
src: url('uni-sans-bolditalic-webfont.eot');
src: url('uni-sans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-bolditalic-webfont.woff') format('woff'),
url('uni-sans-bolditalic-webfont.ttf') format('truetype'),
url('uni-sans-bolditalic-webfont.svg#uni_sans_bold_italicitalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_boldregular';
src: url('uni-sans-bold-webfont.eot');
src: url('uni-sans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-bold-webfont.woff') format('woff'),
url('uni-sans-bold-webfont.ttf') format('truetype'),
url('uni-sans-bold-webfont.svg#uni_sans_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_lightregular';
src: url('uni-sans-light-webfont.eot');
src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('uni-sans-light-webfont.woff') format('woff'),
url('uni-sans-light-webfont.ttf') format('truetype'),
url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sans_thinregular';
font-weight: normal;
font-style: normal;
}
Thanks in advance
First, open your SVG file with a text editor and find out if the name you've written in the hashtag for the SVG matches what it says in the file.
If it matches, try this, if not, adjust accordingly.
#font-face {
font-family: 'uni_sans_regular';
src: url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
src: url('uni-sans-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body { font-family:'uni_sans_regular',Arial,sans-serif; }
If the font still doesn't display on mobile then I'd assume your SVG or WOFF font files are corrupt, the path to the font file is not correct, or the files aren't downloading to the mobile device for some other reason (slow connection perhaps).
The SVG file should work for Firefox 3.5, Chrome 0.3, Safari 3.1, Opera 9, and all iOS devices. The TTF file will pick up IE9 and Android 2.2. You don't need the EOT file unless you want to cover IE8-. I just reduced it to the minimum number of includes so you can narrow down the issue.
If your hosting the file on an IIS server, you may need to adjust your server settings. IIS will not serve files with unknown MIME types so you must set the MIME type for SVG to image/svg+xml, similarly for WOFF. Instructions from Microsoft (link)
If your testing with a 3rd party browser app on your mobile device, try testing on the default browser that comes with the device because many 3rd party apps have their own quirks.
I've noticed when using web fonts that they can initially can take a second to come up; like if you create a drop down nav menu, when you hover over the menu for the first time the whole menu will appear as just the background color for a second and then the text will appear.
This isn't really ideal and it leads me to believe that webfonts aren't downloaded when the CSS file is loaded, but rather when you first view them on the page.
But on the other hand, I already have the fonts installed on my PC so they shouldn't need to be downloaded, so that lends the question on why do they do this!?
Here is the CSS I use to load my webfonts:
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Italic-webfont.eot');
src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Italic-webfont.woff') format('woff'),
url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Bold-webfont.eot');
src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Light-webfont.eot');
src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Light-webfont.woff') format('woff'),
url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Medium-webfont.eot');
src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
font-weight: 500;
font-style: normal;
}
When are webfonts downloaded?
Paul Irish made a simple page to test this: http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html
It shows that most browsers download fonts when they're used in a page rather than when they're declared in CSS. I believe IE is the exception but I don't have it running to test right now.
The reason for downloading on usage rather than on declaration is to reduce unnecessary network traffic, e.g. if a font is declared but not used.
Can font downloading be avoided?
You're right that if fonts are already installed they shouldn't need to be downloaded. As #Patrick said above, this can be done using local(). It's placed before url() in the CSS and takes the name of the font (the PostScript name is subsequently needed for Safari on Mac OS X). Try out the following change to your CSS:
#font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: local(Roboto Regular), local(Roboto-Regular),
url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Finally, to reduce font download times, you could make sure you're doing the following:
Putting CSS before JavaScript
Adding far-future Expires headers for
the fonts (so the browser caches them)
GZipping the fonts
Here's a good summary of dealing with font display delays: http://paulirish.com/2009/fighting-the-font-face-fout/
Let's say that I'm using a non-system font (ex., PT Sans) for a CMS website. So what I do is, I'll include the font family of different styles (say, Regular, Italic and Bold) using #font-face. Then I would define the font-family of body as PT Sans Regular. All is well till now.
Then, my client for example, edits some text content in the website. He gives different font-styles to the text - like he boldens an important message and italicizes the name of locations. So altogether, he stylizes the content the way he likes. No problem with that too.
But, what the real question is, how will the website know that if there's a italicized text, it should use PT Sans Italic instead of the regular version of the font, even if the body's font is PT Sans Regular?
I've been thinking about this for a while, but I can't find a solution for it.
Is there a possible solution for situations like this?
This is absolutely possible. Here's how you do it:
#font-face {
font-family: 'PTSans';
src: url('pts55f-webfont.eot');
src: url('pts55f-webfont.eot?#iefix') format('embedded-opentype'),
url('pts55f-webfont.woff') format('woff'),
url('pts55f-webfont.ttf') format('truetype'),
url('pts55f-webfont.svg#PTSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'PTSans';
src: url('pts56f-webfont.eot');
src: url('pts56f-webfont.eot?#iefix') format('embedded-opentype'),
url('pts56f-webfont.woff') format('woff'),
url('pts56f-webfont.ttf') format('truetype'),
url('pts56f-webfont.svg#PTSansItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'PTSans';
src: url('pts75f-webfont.eot');
src: url('pts75f-webfont.eot?#iefix') format('embedded-opentype'),
url('pts75f-webfont.woff') format('woff'),
url('pts75f-webfont.ttf') format('truetype'),
url('pts75f-webfont.svg#PTSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'PTSans';
src: url('pts76f-webfont.eot');
src: url('pts76f-webfont.eot?#iefix') format('embedded-opentype'),
url('pts76f-webfont.woff') format('woff'),
url('pts76f-webfont.ttf') format('truetype'),
url('pts76f-webfont.svg#PTSansBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
When you define the #font-face fonts, make sure that all your font-family names are the same. Then set the font-weight and font-style correctly for each font. So if a font is bold, set font-weight: bold. etc.
Then in your CSS you can do:
body {
font-family: 'PTSans';
}
And the various tags <strong> <em> etc will pick the correct font that matches.