-
Notifications
You must be signed in to change notification settings - Fork 0
/
september_17.html
72 lines (69 loc) · 4.38 KB
/
september_17.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<title>Jarod Reichel's Web Dev Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo&family=Roboto&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<h1>CS 347 Blog Entry - September 17, 2021</h1>
</header>
<main>
<h2>Part I: CSS Web Fonts</h2>
<p>One thing I read about on my own this week was how web developers can use CSS to specify and utilize fonts that may or may not be installed on the user's computer. This is done using the <span class="code_inline">@font-face</span> rule, which allows developers to link to a font file located on their web server. This file can be a number of different formats, such as OpenType Font (OTF) or TrueType Font (TTF), although not all browsers support each type equally. In addition, the developer obviously has to adhere to the license of the font creator(s).</p>
<h3>Sample Code</h3>
<pre>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
</pre>
<p>The above code and information was sourced from <a href="https://www.w3schools.com/csS/css3_fonts.asp">W3Schools.com</a>.</p>
<h2>Part II: Google Fonts</h2>
<p>In addition to using a file stored on your own web server, Google provides a service called Google Fonts that hosts 1,284 different fonts for developers to use (Although once again, licenses vary). To use Google Fonts, you can simply find a font on their site, and from there you are able to copy the necessary HTML code, which mainly consists of <span class="code_inline"><link></span> elements that reference CSS files on Google's Server. However, you can also use CSS's own <span class="code_inline">@import</span> rule to link to Google's Server with only CSS. Under the hood, the CSS files hosted by Google consist of various definitions of the aforementioned <span class="code_inline">@font-face</span> rule.</p>
<h3>Sample Code</h3>
<div style="display:inline-block;padding: 25px;">
<h4>CSS from Google</h4>
<pre>
@font-face {
font-family: 'Exo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/exo/v12/4UaZrEtFpBI4f1ZSIK9d4LjJ4lM3OwRmOw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</pre>
</div>
<div style="display:inline-block;padding: 25px;">
<h4>HTML to link to Google</h4>
<pre>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo&family=Roboto&display=swap" rel="stylesheet">
<style>
h1, h2, h3,h4 {
font-family: 'Exo', sans-serif;
}
</style>
</pre>
</div>
<p>The above code and information was sourced from the following URLs:</p>
<ul>
<li><a href="https://fonts.googleapis.com/css2?family=Exo&family=Roboto&display=swap">Google Fonts</a> - CSS</li>
<li><a href="https://fonts.google.com/about">Google Fonts</a> - Information</li>
<li><a href="https://fonts.google.com/specimen/Exo?query=exo#glyphs">Google Fonts</a> - HTML links</li>
<li>My own code - CSS font-family property</li>
</ul>
</main>
<footer>
<p>Site by Jarod Reichel</p>
</footer>
</body>
</html>