import fonts css local code example

Example 1: how to link locally installed fonts to css

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: "myFirstFont";
    src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");
}

.harlow {
    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 class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>
</body>
</html>

Example 2: how to link fonts css

@import url(//fonts.googleapis.com/css?family=Open+Sans);
/*When not hosting on my own server use the @import rule which is Google Fonts Versionn and hosted on their server*/

Example 3: css how to embed fonts

/************* How to embed fonts using GOOGLE FONTS? ******************
This will ensure that the Font type of your choice will appear for all 
users, regardless of whether or not they have this Font installed!


1º -  Go to https://fonts.google.com/


2º - Choose a Font and, for that particular choice, you mark the option: 
     "Select this style". Do this for every Font you wish to incorporate


3º - In the page of your "Selected Family", go to the option "Embed"


4º - Copy the link and paste in the <header> of your html file: */
<link href="https://fonts.googleapis.com/css2?family=..." 
  rel="stylesheet"> /*


5º - Finish by copying the "CSS rules to specify families" that the site 
gives you and (in your css file) pasting a new property to your element, 
for exemple: */

h1 {
  font-family: "Sacramento", cursive;
}

Tags:

Typescript Example

Recent Posts