<!doctype html>
<html lang="en">
<head>
<title>Web fonts</title>
<meta charset="utf-8">
<style>
/*all-document styles*/
*{
box-sizing:border-box;
}
html{
height:100%;
}
body{
height:100%;
}
a:hover,a:active,a:visited,a:link{
text-decoration:none;
color:inherit;
}
h1,h2,h3,h4,h5,h6{
text-transform:capitalize;
font-family:verdana;
padding-left:0.5em;
}
p{
line-height:1.5;
font-size:18px;
font-kerning:normal;
padding-left:1.2em;
}
/*typeface for the header*/
@font-face{
font-family:paint;
src:
local(paint the sky),
url(psr.otf) format("opentype");
font-weight:100;
font-style:normal;
}
/*basic page styles*/
body{
padding:0;
margin:0;
font-size:18px;
}
pre{
background: #dcedc8 ;
color:black;
padding:10px;
border-left:8px solid white;
}
/*page header styles*/
.header{
height:20%;
width:100%;
background: #7fb3d5 ;
margin:0;
position:relative;
}
.header .htitle{
position:absolute;
top:5%;
left:5%;
font-family:sans-serif;
font-size:60px;
text-transform:capitalize;
color:white;
}
.header .htitle span{
font-family:paint;
}
.header nav{
position:absolute;
bottom:5%;
right:2%;
}
.header nav ul{
list-style-type:none;
padding:0;
margin:0;
display:inline-block;
}
.header nav ul li{
list-style-type:none;
padding:10px;
margin-left:0.5em;
margin-right:0.5em;
display:inline-block;
width:7em;
text-align:center;
color:white;
font-family:arial,sans-serif;
font-size:18px;
font-weight:bold;
font-stretch:ultra-expanded;
text-transform:capitalize;
box-shadow:1px 1px 5px 1px #fdfefe inset;
border-radius:1em;
}
.header nav ul li a{
text-decoration:none;
}
.header nav .usage-menu ul{
display:none;
padding:10px 5px;
margin:0;
background: #154360;
position:absolute;
border-radius:0.5em;
top:105%;
left:-5%;
}
.header nav li.usage-menu ul li{
margin:0.5em 0.1em;
list-style-type:none;
padding:10px 2px;
text-align:center;
color:white;
font-family:arial,sans-serif;
font-size:18px;
font-weight:bold;
font-stretch:ultra-expanded;
text-transform:capitalize;
border-bottom:1px solid white;
box-shadow:none;
border-radius:0;
}
.header nav li.usage-menu:hover ul{
display:block;
}
.header nav li.usage-menu ul:hover{
display:block;
}
.header nav li.usage-menu ul li:hover{
box-shadow:1px 1px 5px 1px #fdfefe inset;
}
/*page main content parts styles*/
/*part-1*/
.resource{
width:100%;
padding:6em 3em 2em 3em;
margin:0;
}
.resource-paragraph li a{
text-decoration:none;
}
/*part-2*/
.embeding{
width:100%;
padding:6em 3em 2em 3em;
margin:0;
background: #154360 ;
color:white;
}
li.usage-menu{
position:relative;
}
</style>
</head>
<body>
<div class="header">
<div class="htitle">using <span>adorable</span> webfonts</div>
<nav>
<ul>
<li><a href="#resources">resources</a></li>
<li><a href="#embed">embeding</a></li>
<li class="usage-menu">usage
<ul>
<li><a href="#gfonts">google fonts</a></li>
<li><a href="#at-rule">@font-face</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="resource">
<h1 id="resources">where do i find nice webfonts!</h1>
<p class="resource-paragraph">
google,fontsquirrel and many other resources have paid and free webfonts.gooogle has it's unique yet common way in embeding webfonts.whilst others have different way of embeding fonts.below are two most popular resources webfonts libraries
<ol>
<li><a href="https://developers.google.com/fonts/">Google Fonts<a/>
</li>
<li><a href="https://www.fontsquirrel.com/fonts/list/recent">Fontsquirrel</a>
</li>
</ol>
</p>
<h1>useful tools</h1>
<p class="tools-paragraph">
<ul>
<li><a href="https://skyfonts.com/">SkyFonts</a></li>
<li><a href="https://meowni.ca/font-style-matcher/">font-style matcher</a> is used to fill the gap between a standard font and a web font.</li>
</ul>
</p>
</div>
<div class="embeding">
<h1 id="embed">embeding webfont in a document</h1>
<p>here where the real stuff begins to arise.now embeding a webfont inside css document comes in a couple different ways and approaches.therfore.embeding will be catogarized based on the webfont provider and the certain service of webfonts-embeding they deliver.do not be confused of the different ways of embeding.in the end it is jsut a regular html/css ruels and coding.</p>
<h2 id="gfonts">googlefonts service</h2>
<p>
has a certain way of embeding a webfont.they use a <code>link</code> request in the <code>head</code> tag of the html document to request the font the user decieded to use.the <code>href</code> attribute that holds the link that requests the webfont intended to be used can be customized inorder to specify the exact <em>font face</em> the user wants.there are many many options and preferences to be selected through that link custoization including <code>font-weight, font-style,subset</code> of a font,etc.keep in mind that if a certain font does not have a specific font style or weight(or combined) as an indivisual font-face.then customization is not effective.</p>
<p>custimaztion of a link embeding a webfont from google fonts can be used also as a way to optimize webfont.and thus saving bandwidth,faster rendering,etc.this can be viewed in the same utility that is used to embed the webfont.</p>
<p><a href="https://developers.google.com/fonts/docs/getting_started"><strong>This Guide</strong></a> can be used as a reference whenever embeding fonts from google fonts.</p>
<p>google fonts let us download the font file as a package of font faces(or as available).when downloading the file 1-unzip it 2-install the prefered faces(or as available) 3-use it in the document.</p>
<h2 id="at-rule">@font-face</h2>
<p>for the last step of downloading and using a font file <code>@font-face</code> is now used to embed the font in the docuemnt.the descriptors are used to define the font name and characterstics of the font face.this lead to the descriptors usage notes below:
<ol>
<li><code>@font-face</code> descriptors are used to matching the font face properties with the element's properties.the font face with fully matching the element's properties will be downloaded.</li>
<pre>
/*this font-face will match with element below it*/
@font-face{
font-family: 'nice font';
font-weight:100;
font-style:italic;
}
div{
font-family: 'nice font';
font-weight:100;
font-style:italic;
}
/*descriptors do not tell how the font should look on an element.instead tell how the font face looks like.
and match it with a similar element to download it.unmatching font face will not be downloaded.*/
</pre>
<li>forcing an element to have some font style that is not available with the font faces will cause the user agent to do some flips:
<pre>
/*this font-face is not matching with th element below*/
@font-face{
font-family: 'nice font';
font-weight:100;
font-style:normal;
}
/*but the browser will foce the font to be bold and italic but in a form that is not desired.
not similar to the original bold or italic style.it is called fake bold or fake italic*/
div{
font-family: 'nice font';
font-weight:700;
font-style:italic;
}
</pre>
</li>
<li>the behavior above is a bit different with <code>font-stretch</code> property.as the browser will only choose the available style.it will not try to fake any thing and choose the available style only.the browser will not try to expand or condense font.</li>
<li>
the <code>font-family</code> descriptor can be any name.one font-family name could be used for multiple font-face(s) of different resources.
<pre>
/*one font name "nice"*/
@font-face{
font-family:nice;
src:url('rsc-1');
.
.
descriptors
}
@font-face{
font-family:nice;
src:url('rsc-2');
.
.
descriptors
}
/*element uses font defined above.it's elements are tested for match with font descriptors above-
keep in mind that font-family descriptor is also tested with tge rest of the descriptors*/
p{
font-family:nice;
.
.
styles
}
</pre>
</li>
</ol>
</p>
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.