How can I use material fonts and icons locally, because I have not always access to the internet to reference it through http.
Can anybody help me?
According to their guide you can download icons as svg and png, as well as download the icon fonts themselves and implementing them like so:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(myLocalFontDir/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(myLocalFontDir/MaterialIcons-Regular.woff2) format('woff2'),
url(myLocalFontDir/MaterialIcons-Regular.woff) format('woff'),
url(myLocalFontDir/MaterialIcons-Regular.ttf) format('truetype');
}
The you can use them without an internet connection:
<i class="material-icons">face</i>
The icons are available for download from https://www.google.com/design/icons/
The Material Design font for western languages is all Roboto, which are Google fonts. Those are downloadable, too, from many places.
Related
I have the following font setup in the CSS for a wordpress based site I'm building and the fonts display fine in FF, but not at all in IE(9) or Chrome(latest).
/* =Typography
-------------------------------------------------------------- */
#font-face {
font-family: 'Humanist';
src: url('fonts/humanist521lightbt-webfont.eot');
src: url('fonts/humanist521lightbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist521lightbt-webfont.woff') format('woff'),
url('fonts/Humanist521LightBT.ttf') format('truetype'),
url('fonts/humanist521lightbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'HumanistIT';
src: url('fonts/humanist521lightitalicbt-webfont.eot');
src: url('fonts/humanist521lightitalicbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist521lightitalicbt-webfont.woff') format('woff'),
url('fonts/Humanist521LightItalicBT.ttf') format('truetype'),
url('fonts/humanist521lightitalicbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'HumanistBo';
src: url('fonts/humanist777blackbt-webfont.eot');
src: url('fonts/humanist777blackbt-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/humanist777blackbt-webfont.woff') format('woff'),
url('fonts/Humanist777BlackBT.ttf') format('truetype'),
url('fonts/humanist777blackbt-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
When I need to use the font for an element, I just add font-family: 'Humanist', Arial, sans-serif;
The fonts are stored in the theme's directory in folder called "fonts".
Am I doing something wrong or missing something for it to work with other browsers?
Thanks
Internet Explorer 9 and less has some issues displaying .TTF files. It does not support embedded fonts via the CSS3 scheme without first converting into supported formats (.svg, .ttf, .eot, etc.). However, you can tweak your #Font-Face Syntax to support this.
With Chrome not displaying the correct font, this is due to different browsers having different needs. You can find more information in the second link in the more information below.
A side note as well: if your font is hosted on Google Fonts, embed a link into your website instead of hosting it yourself.
TLDR; need a comprehensive list of #font-face types
More information:
SO Question - IE problems with True Type Font files
SO Question - Font-Face problem in Chrome
Further Hardening of the Bulletproof Syntax - Fontspring.
Bulletproof #font-face syntax - Paul Irish
To use the font for an HTML element, then we need to use the #font-face rule of power full features of CSS3 that supported in many modern browser. CSS property font-family of HTML is used to defined the font name which we want to embed ans src property used to defined the path of the font to be embed.
#font-face
{
font-family: myfont;
src: url('(fontfile.eot') format('embedded-opentype'),
url('(fontfile.woff') format('woff'),
url('(fontfile.ttf') format('truetype'),
url('(fontfile.svg#(fontfile') format('svg');
}
div,h2
{
font-family:myfont;
}
I am trying to add this font : http://www.fonts2u.com/vps-dong-da-hoa.font
to my website. Here is my CSS :
#font-face {
font-family: "VPSDODAH";
src: url(http://localhost/blablabla/wp-content/plugins/buddypress/bp-themes/frisco-for-buddypress/VPSDODAH.ttf) format("truetype");}
#header h1 a {
font-family: "VPSDODAH";}
The URL to the font is correct but it's not working, what can it be ?
Thank you very much.
Not all browser support .ttf. Use a font generator to get all the font types ( I use font2web ) and then just add the fonts via #font-face:
#font-face {
font-family: 'fontName';
src: url('../fonts/fontName.eot');
src: url('../fonts/fontName.eot?iefix') format('eot'),
url('../fonts/fontName.woff') format('woff'),
url('../fonts/fontName.ttf') format('truetype'),
url('../fonts/fontName.svg#fontName') format('svg');
font-weight: normal;
font-style: normal;
}
Read here about browser font support.
You can try this website for your web font generation. If your font exists, you can convert it and get all the #font-face parameters to apply it for your website.
I'm still pretty new to html and css, so I might be overlooking things.
Been entertaining myself trying to create a little website and arrived at embedding a font to it.
It is working in firefox, yet in internet explore it isn't. I do not know about other browsers.
Here is a link to the site. Click the L to go to a second page:
http://librarchive.com/newcat.html.
Due to this there are also some positioning faults, as you can see.
So the font is not correctly working. What do I do?
Here is my css code, i have a .eot and .ttf file of the font:
#font-face{
font-family: libralust;
src: url('Futura_Bk.eot'); /* For IE */
src: local('libralust'), url('Futura_Bk.ttf') format('truetype'); /* For non-IE */
}
body {
font-family: libralust, Verdana, Arial, sans-serif;
text-align:center;
}
I've been searching, but am not experienced enough to understand it all.
Other commentary about site is appreciated too. Thanks for you help!
this a an example of cross-site font embedding has suggested by fontsquirel
#font-face {
font-family: 'OpenSansLight';
src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot');
src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.woff') format('woff'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('/skins/default/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
Now you can figure out what's wrong ?
I'll point another hint : local
For a detailed explanation read this : the-new-bulletproof-font-face-syntax and/or bulletproof-font-face-implementation-syntax
Not all browsers support Font-Face and there are lots of font ext; like eot, svg, woff, ttf.
Try this since you only have eot and ttf:
#font-face{
font-family: libralust;
src: url('Futura_Bk.eot');
src: url('Futura_Bk.eot?#iefix') format('embedded-opentype'),
url('Futura_Bk.ttf') format('truetype');
font-weight: normal; /* thin? normal? bold? */
font-style: normal;
}
I am trying to use Helvetica Neue as the font for my website everywhere so I applied to the body like so
body {
background-image: url("http://inauguralseason.com/wp-content/themes/twentyeleven/images/background.jpg");
font-family: "Helvetica Neue" !important;
}
but my font does not appear, it was working at one point but now its not working in Firefox, Chrome, Safari or IE
you can see what I am talking about here
http://inauguralseason.com/
any help would be appreciated,
Thanks,
J
Your #font-face seems to have the font family named as 'helvetica_neueregular' and I don't see a font set for your navigation but anywhere else if you add 'helvetica_neueregular' it loads the font. As far as browser consistency In Chrome dev tools it looks like you are missing some font browser types to provide full browser support.
http://inauguralseason.com/wp-content/themes/twentyeleven/style.css
#font-face {
font-family: 'helvetica_neueregular';
src: url('helveticaneue-medium-webfont.eot');
src: url('helveticaneue-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneue-medium-webfont.woff') format('woff'),
url('helveticaneue-medium-webfont.ttf') format('truetype'),
url('helveticaneue-medium-webfont.svg#helvetica_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
EDIT: This is loading the medium font but it called regular just change to 'helvetica_neuemedium'
You need to upload the font to your web-site and declare the font-face
#font-face
{
font-family: 'Helvetica Neue';
src: url('HelveticaNeue.ttf'),
url('HelveticaNeue.eot'); /* IE9 */
}
and only then you can use it on your web-pages.
I've been trying to use #font-face on a site, I use the css that font squirrel gives me and it looks good in Safari, IE and on the iphone but in firefox it don´t show up.
I have Firefox 7.0.1 on Mac OSX Snow Leopard.
I've searched the web and tried some of the "solutions" but none has worked.
the site I wanna load this #font-face is http://www.utochinredning.se
Can some one point me in some direction of what might be a solution?
Post your code?
Shot in the dark, but have you included all the appropriate font files? This is a sample of what your #font-face should look like (at least what mine looks like)
#font-face {
font-family: 'Museo300';
src: url('Museo300-Regular-webfont.eot');
src: url('Museo300-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Museo300-Regular-webfont.woff') format('woff'),
url('Museo300-Regular-webfont.ttf') format('truetype'),
url('Museo300-Regular-webfont.svg#Museo300') format('svg');
font-weight: normal;
font-style: normal;
}
I have the following font files:
Museo300-Regular-webfont.eot
Museo300-Regular-webfont.svg
Museo300-Regular-webfont.ttf
Museo300-Regular-webfont.woff
Then in your stylesheet:
h1 {
font-family: "Museo300";
font-weight: normal;
}