WebDesign – Custom Font

By /
How to add custom font to your webpage.

In order to give your site your own identity, frequently webdesigners use there own custom font rather then the standard web fonts . also corporate business with there own font use these to enhance there corpotrate indntity online.

Web fonts allow Web designers to use fonts that are not installed on the user’s computer. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed. 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.

Deepest Possible Browser Support

This is the method with the deepest support possible right now. The @font-face rule should be added to the stylesheet before any styles.

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

}

Then we can use it to style elements.



CSS3
body {

font-family: 'MyWebFont', sans-serif;

}
HTML5 + CSS3

With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the head section:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>
Scroll to Top