This has been an idea in the works for the past… well, always. Since the beginning of time (the day the internet was born) people have wanted to go beyond the limited realm of traditional web safe fonts. Now you can, and the best part – it’s not too difficult.
Step 1: Download a web-ready font kit of the font you want on your site. Use FontSquirrel – it worked for me.
Step 2: Once you download the font kit, there will be several files you will need to reference and or upload. The first one you will need to use is the css file. Put the css code into your website’s css code, and tag it according to wherever you want it to be used (i.e., for the overall look of your site, or for .p tags/classes, etc.)
Step 3: Open up the .svg file in a text editor. I use TextEdit. Locate the font id tag (I know the file looks complicated, but just use a find function for “font id” and you’ll find something like: . Copy and paste the font id name into your css code, representing the file name of where the file is located in the file structure. For example: url(http://mywordpresssite.com/blog/wp-content/themes/themename/fonts/MuseoSlab-500.svg#MuseoSlab-500)format(‘svg’);
Step 4: Repeat Step 3 for the other file sources that you downloaded (the .eot file, the .woff file, and the .ttf file). The below italicized example is what your css code should/will look like (note: those other font file extensions are what’s need for cross-browswer capability).
src: url(http://leahnaomi.com/wp-content/themes/tofurious-21/fonts/raleway_thin-webfont.woff) format(‘woff’), url(http://leahnaomi.com/wp-content/themes/tofurious-21/fonts/raleway_thin-webfont.ttf) format(‘truetype’), url(http://leahnaomi.com/wp-content/themes/tofurious-21/fonts/raleway_thin-webfont.svg#Raleway) format(‘svg’);
Step 5: That’s pretty much it. Just make sure you save and upload the new css file that contains the @font-face code list above (or visit their website for more info) and upload each of the different font file sources that were downloaded, and then referenced in your code (again, representing where they are located in your website’s file structure).