46 lines
2.8 KiB
HTML
46 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Homework 3 - Serving Fonts</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
|
|
@import url("/stylingsheets/cowboybebopfontstyle.css");
|
|
h1 {font-family: 'ITC Cheltenham Std Bold Condensed Italic', serif;}
|
|
h2 {font-family: 'ITC Cheltenham Std Bold Condensed Italic', serif;}
|
|
h3 {font-family: 'ITC Cheltenham Std Bold Condensed Italic', serif;}
|
|
h4 {font-family: 'Ubuntu', sans-serif;}
|
|
p {font-family: 'Ubuntu', sans-serif;}
|
|
</style>
|
|
</head>
|
|
<h1>Serving Fonts, by Charles</h1>
|
|
<p>
|
|
For this assignment, I've served two fonts, one for headings 1/2/3, then another for heading 4 and main text.
|
|
</p>
|
|
<p>
|
|
The headings use a font that I'm serving myself, while using some FANCY CSS to get working. It has a WOFF font hosted on my server, with a stylesheet used and imported.
|
|
(Take a look at the source and poke around a bit!)
|
|
</p>
|
|
<p>
|
|
The main text is from Google Fonts API, and is super easy to use and import, with three lines of code and no extra work, you have a different font!
|
|
</p>
|
|
<h2>For the more technical:</h2>
|
|
<p>
|
|
Using CSS(Cascading Style Sheets), I was able to serve these fonts to you. I've imported two CSS files to make the fonts work.
|
|
One file I have complete control of, and the other Google serves.
|
|
</p>
|
|
<p>
|
|
The first file is a font called Ubuntu, and is my favorite font in the world. It's clean, minimal, and looks nice everywhere.
|
|
Using Google's Font API, I was able to import their CSS sheet that does all the styling for Ubuntu.
|
|
</p>
|
|
<p>
|
|
The second file is a font call ITC Cheltenham Std Bold Condensed Italic(what a long name), and is probably a good heading font, I was inspired to use it because I watched Cowboy Bebop for the millionth time.
|
|
The end credits uses this font as like a little ending bit, and looks clean. I decided to host it myself, which took a bit of effort to do, unlike the Google Font API one.
|
|
I had to first upload the WOFF file(like an OTF or other font type file, but specifically for font serving) to my server, and give it a path, easy enough.
|
|
Then, I had to actually write the CSS for how the font family works, which is quite a bit more challenging, even as an eight line file. (See the source at https://cdez.cdez.pw/stylingsheets/cowboybebopfontstyle.css, not hyperlinked for security reasons.)
|
|
After that, I had to import the style sheet into my HTML file, and then use the correct styling tags to make it show.
|
|
However, once it was done, it looked super nice as a header!
|
|
</p>
|
|
<h2>It works! Here it is again!</h2>
|
|
<h2>SEE YOU SPACE COWBOY...</h2>
|
|
<h3>ARE YOU LIVING IN THE REAL WORLD?</h3>
|
|
</html>
|