Loading custom fonts into the website

Question

any one help me, i am using specific fonts into my website project. anonymous users did not know how to download, install and these fonts, if the fonts are not install then website is seeing good. is there any way, or some central websites for fonts that can upload and shared specific fonts to use. Like bootstrap, jquery, provide libs to use it.

create webfonts and keep the files in your server. – Suresh Ponnukalai May 18 '15 at 05:05 — Suresh Ponnukalai, May 18 '15 at 05:05

Kheema Pandey · Answer 1 · 2015-05-18T05:16:03.560

Using CSS3 feature you can use custom fonts. you just need to upload the fonts on the server and define the path in css code.

Few fonts required different format types to work on different OS. so you can use online font converter to create all font type format .

@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 */
}

it this solution work for you, you may accept the answer. – Kheema Pandey May 18 '15 at 12:13 — Kheema Pandey, May 18 '15 at 12:13

score 0 · Answer 2 · edited May 23 '17 at 10:27

You are looking for Web Fonts. Using CSS like this, you can tell the browser to download fonts from a URL and use them on the page:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

^{Source: @fencepost's answer to How to embed fonts in HTML? on SO}

Google Fonts is an example of a service that hosts font files. Typekit is another.

You can roll your own, but you will need to convert the file to all the necessary formats to ensure compatibility. IANAL, but you may wish to to check the legality of hosting your own fonts before you do so.

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Use Google Fonts

Here is the link.

How to use it? Look for quick use button.

1. Choose a Font to use and select its style

here, I'll be using Open Sans.

2. Create CSS Link to page

then, google will generate its link for use. Example:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>'

use that in your page.

3. Add rule to CSS script

on your css script, add:

font-family: 'Open Sans', sans-serif;

Actually, Google Font is pretty straight forward. Make sure to use quick use button to see what I mean.

Quick-use button

Loading custom fonts into the website

3 Answers3

Use Google Fonts