When I download the font, I get the zip file, and I can see the different types of fonts I can use.
Mosh then talks about converting the downloaded fonts to a Woff, or Woff2 format, as these are much smaller and the broweer will load the font faster.
When I convert the file and download, my downloaed kit does not look like what mosh has. See screenhots for reference, can anyone tell me what I am missing?
You can just copy the .woff/.woff2 files into the workspace/folder within your html in vs code. Create a folder named fonts and stick them in there.
The rest of the files:
The config file is what font squirrel used to generate the all files in the webkit based on your selections when you created the kit. The demo files are just what it says… demos they provide you a preview of your fonts. Specimens are stylesheets used for the demo.html files.
The stylesheet.css will contain the css @ (or at-symbols) that you can copy and paste into the top of your stylesheet that will import the fonts. Depending on your folder structure you may need to change the source urls for the directory you put the .woff/.woff2 files in.
#!/bin/sh
echo "Converting all the files within the /fonts folder from TTF to WOFF2..."
FONTS=/fonts/*.ttf
# Force directory change to /fonts
cd /fonts
for f in $FONTS
do
if [ -f $f ]
then
echo "Found $f file. Trying to convert to WOFF2 file"
woff2_compress $f
fi
done
Dockerfile
FROM alpine:latest
RUN mkdir /scripts
WORKDIR /scripts
COPY --chown=root:root --chmod=0700 ttf2woff2.sh /scripts
RUN mkdir /fonts
WORKDIR /fonts
RUN apk update && apk add woff2
CMD ["/scripts/ttf2woff2.sh"]
Hi,
I had posted about the subject last year.
As for the image I proposed it wasn’t updated in years and the commands do not seem to work.
But an image could be createdwith the woff2 tools so that it enables convertion.
Cheers
EDIT:
I did play around for I did not use it much and could not find man pages for that.
it is very simple to use but cannot take wildcards so a script should be written to deal with numerous files to convert.
I shall clean the fonts folder and create an image to test it from scratch.
The idea would be to start the image with a mapped volume. Put ttf files to convert in there and then just run the script.
EDIT 3 :
I got crazy why my files were not copied while paths were correct.
There are 2 things to check.
Build context : which I didn’t really knew but was correct.
The fact that when you map a folder, the original content is unavailable. The script was indeed copied successfully at build but when I mapped the volume where it is located the script disappears.
I had to move the script to a separate folder and it worked.
That’s cool but some of the time you might find google fonts does not have the font you need. Another reason you might not want to use them for everything is performance. Google fonts are loaded from googles servers. This might not be an issue all of the time but it is something to consider, especially if you are going heavy on text or many fonts across a site (which I do not recommend).
If you were having issues, attached are some screenshots of the how to implement the woff files from the font squirrel webfontkit so you can see the css, webpage, and the font applied from within the safari dev tool. Not radically different from chrome, firefox…etc
For the most part I placed the downloaded woff files into the folder you see within my vs code explorer. I then copy and pasted the @ font-face declarations straight from the webfontkit into my style.css file. I had to prefix the urls to the woff files so they could be found, and finally use them in my h1 and p rulesets. All in all it took maybe 4 minutes from downloading to implementing so it doesn’t have to be crazy complicated.
and yes. I applied a bold font weight to both of them. Mainly cause I was trying do this as a very quick example while I am waiting in between things. The regular font should be normal, but the process is still the same.
Well to be honest, I am not really taking this course to be a web devloper, although I do see the important of what you are talking about. Google fonts just works for me for ehat I am trying to do
Again, I appreciate the insight, learning a ton here!
