How to convert online font link into local ones? - html

How to convert a online font link into local ones? (Probably download the font file is ok)
for example, HTML and CSS from google fonts:
HTML:
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro" rel="stylesheet">
CSS:
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
or with import style:
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro');
</style>
The main goal here is:
After download, and convert to local. The whole website can be served locally in local network, without internet connection.

You can take help from the google web font helper. Its really a handy tool to download the google fonts and install them locally.
The benefit of this tools and Implementation:
1. It will provide all format of fonts ( .eot, .woff, .woff2, .svg, .ttf ).
2. Help you in implementation with css. It generates css of the selected font and styles.
example of css code:
/* open-sans-regular - latin */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans'), local('OpenSans'),
url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
3. Manually Select all font weights and style you want to include in your project and download them.

You have to download the font file and declare it in the css :
#font-face { font-family: Roboto; src: url('Roboto.otf'); }

Related

Font support on IE 11

I have a problem with font on IE 11. Some of my element can't accept font-family. I had .woff and .woff2 but it's not accepting my fonts. How can I solve this?
Here's my CSS code:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.eot'); /* IE9 Compat Modes */
src: local('Roboto Thin'), local('Roboto-Thin'),
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff') format('woff'), /* Modern Browsers */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
And I'm using the font-family rule like below:
body {
font-family: Roboto;
}
Here is a result:
Your problem is you're assuming Roboto is a built-in web font, which it's not. You need quotation marks:
body {
font-family: 'Roboto';
}
Did you check the network tab in DevTools (F12)? You shouldn't have any 404 at load.
If you support IE10+ (IE9- isn't supported by MS itself), you only need WOFF2 and WOFF formats. SVG for example is for iOS3-4 or something like that…
You should first test with an uncommon font family name and super normal parameters (no italic, no thin or bold):
#font-face {
font-family: 'test';
font-style: normal;
font-weight: 400;
src: url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff') format('woff') /* Modern Browsers */
;
}
body,
body * {
font-family: 'test' !important;
}
It allows you to test for correct path relative to your CSS (compiled CSS if you use Sass and _partials or LESS or PostCSS or Stylus!).
Then you can add font-weight: 100; to both your #-declaration and rules (and remove test bits like body * and !important :p) .
Then change the name of the font family.

How do I use #font-face with the Noto Emoji font by character references?

I have two local files
index.html
NotoEmoji-Regular.ttf
I have downloaded NotoEmoji-Regular.ttf from google.com/get/noto/.
The index.html contains this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Emoji</title>
<style>
#font-face {
font-family: "Noto Emoji Regular";
src: url("NotoEmoji-Regular.ttf");
}
span {
font-family: "Noto Emoji Regular";
}
</style>
</head>
<body>
Emoji: <span>🖕</span>
</body>
</html>
When I open the index.html in my browser, it does not display the text in the span in Emoji. Using Chrome DevTools (F12 in Chrome) it says the span does have the correct Noto Emoji Regular font.
How do I display an Emoji icon from this font?
1- Make sure your directory is correct.
2- You should add format of font src:
#font-face {
font-family: "Noto Emoji Regular";
src: url('NotoEmoji-Regular.ttf') format('truetype');
}
3- 🖕 is not correct with Noto Emoji font. Try with: ℹ (ℹ)
For cross browsers, you have to convert to web fonts, example:
#font-face {
font-family: 'Noto Emoji Regular';
src: url('NotoEmoji-Regular.eot'); /* IE9 Compat Modes */
src: url('NotoEmoji-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('NotoEmoji-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('NotoEmoji-Regular.woff') format('woff'), /* Pretty Modern Browsers */
url('NotoEmoji-Regular.ttf') format('truetype'), /* Chrome, Safari, Android, iOS */
url('NotoEmoji-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

CSS - Include multiple fonts in one CSS file

How can I add more that one font in a CSS file? I have tried the following but it doesn't seem to work.
#font-face {
font-family: 'Inspira_Reg';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Bold';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Italic';
src: url('http://myfonturl.com');
}
#font-face {
font-family: 'Inspira_Medium';
src: url('http://myfonturl.com');
}
And then to use the font, I simply set the font-family property in the CSS IDs like so:
#titleSection {
margin: 25px 5px auto auto;
font-size: 11px;
text-align:left;
font-family: 'Inspira_Reg';
color: black;
}
But it doesn't seem to work. The font doesn't seem to get recognized, it just seems to use Arial or whatever the default is.
I am using the latest version of Google Chrome and the font types I am using are TTF files.
Thanks, Dan.
The #font-face rule allows custom fonts to be loaded on a webpage.
Once added to a stylesheet, the rule instructs the browser to download
the font from where it is hosted, then display it as specified in the
CSS.
For cross browser compatibility, It seems that font-face requires multiple definitions. For example, this is from a CSS-tricks article:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
An alternative to using this would be to use an import (which would need to be placed at the start of your css file)
Something like:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
which could then be used via:
font-family: 'Open Sans', sans-serif;
This could be used for multiple fonts, by importing them at the top of your CSS, and using the font-family declaration.
For many different fonts, and more information on using them, you could have a look here on google fonts
well every thing looks good except for the font url. you should give the local address of your font. let me give you an full example buddy:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the #font-face rule.</p>
</body>
</html>
so place your font the html folder and use the code :)

Tahoma font family not work in mobile device

Tahoma and verdana font not work in mobile or tablet
My code is :
* {
font-family:tahoma,verdana !important;
}
But not work in mobile devices
Extract the font file you want, and upload it to fontsquirrel.com.
Then take out the following fonts from the package and add the following into your CSS file:
#font-face {
font-family: 'Tahoma';
src: url('path/to/Tahoma.eot');
src: url('path/to/Tahoma.eot?#iefix') format('embedded-opentype'),
url('path/to/Tahoma.woff') format('woff'),
url('path/to/Tahoma.ttf') format('truetype'),
url('path/to/Tahoma.svg') format('svg');
font-weight: normal;
font-style: normal;
}
You can then use the font in your css file by using:
font-family: 'Tahoma', sans-serif;
Most android phones only have a few fonts available by default.
Tahoma is not available on mobile.
You can upload the font to your site and load it with css. See also Google Fonts ;)
Edit : be careful of copyright

CSS How to embed several Font-Weights at once

I was using the Open Sans Font-Family from the Google Fonts Library, where you can just use this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
And it will export all the fonts at once and when you are using Open Sans as Font-Family you can simply put font-weight: XXX and it will automatically use the right font for it.
I downloaded the files directly because we have to use them local now, but it gives me like 10 different fonts for each style and weight (normal, medium, bold, bold italic e.g). I don't want to import them separately and use font-family: Open-Sans-Bold (for example)
Is there any way to import them all at once or tell CSS that it's basically the same Font-Family just a different weight?
(Please excuse my example of Comic Sans neue, just something I had laying about)
You have to add them all separate, look at the following code. Each one has a different 'font-weight' and has a new font file (light, regular and bold).
Each font file has a different font-size which means that if you want to add all of them, you'll have to add them all this way (for each one you want).
#font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Light.eot'); /* IE9 Compat Modes */
src: url('../fonts/ComicNeue-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ComicNeue-Light.woff') format('woff'), /* Modern Browsers */
url('../fonts/ComicNeue-Light.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: 100;
}
#font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Regular.eot'); /* IE9 Compat Modes */
src: url('../fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ComicNeue-Regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/ComicNeue-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: 300;
}
#font-face {
font-family: 'Comic Neue';
src: url('../fonts/ComicNeue-Bold.eot'); /* IE9 Compat Modes */
src: url('../fonts/ComicNeue-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ComicNeue-Bold.woff') format('woff'), /* Modern Browsers */
url('../fonts/ComicNeue-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
font-weight: 700;
}
Calling it is simple after, in your CSS:
p {
font-family: 'Comic Neue', sans-serif;
font-weight: 300; /*or 100/700*/
}
Obviously, you'd replace this with Open Sans and the Open Sans font files.