diff --git a/cs212/homework/3.html b/cs212/homework/3.html new file mode 100644 index 0000000..cb12721 --- /dev/null +++ b/cs212/homework/3.html @@ -0,0 +1,46 @@ + + + + Homework 3 - Serving Fonts + + +

Serving Fonts, by Charles

+

+ For this assignment, I've served two fonts, one for headings 1/2/3, then another for heading 4 and main text. +

+

+ 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!) +

+

+ 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! +

+

For the more technical:

+

+ 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. +

+

+ 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. +

+

+ 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! +

+

It works! Here it is again!

+

SEE YOU SPACE COWBOY...

+

ARE YOU LIVING IN THE REAL WORLD?

+ diff --git a/cs212/homework/CheltenhamStdBoldCondIt.woff b/cs212/homework/CheltenhamStdBoldCondIt.woff new file mode 100644 index 0000000..d2e9be6 Binary files /dev/null and b/cs212/homework/CheltenhamStdBoldCondIt.woff differ diff --git a/fonts/CheltenhamStdBoldCondIt.woff b/fonts/CheltenhamStdBoldCondIt.woff new file mode 100644 index 0000000..d2e9be6 Binary files /dev/null and b/fonts/CheltenhamStdBoldCondIt.woff differ diff --git a/stylingsheets/cowboybebopfontstyle.css b/stylingsheets/cowboybebopfontstyle.css new file mode 100644 index 0000000..d3bfda0 --- /dev/null +++ b/stylingsheets/cowboybebopfontstyle.css @@ -0,0 +1,7 @@ +@font-face { + font-family: 'ITC Cheltenham Std Bold Condensed Italic'; + font-style: normal; + font-weight: normal; + font-display: swap; + src: url('/fonts/CheltenhamStdBoldCondIt.woff') format('woff'); +}