Use your favorite fonts on your own website!

2016.02.29

• Web system development

0

1,221

This is Yamada from the development team.

Over the past few years, CSS frameworks have improved, and even people like me who don't have any design knowledge can now create similar websites.
However, if you don't know how to use it properly, the design tends to look similar to other sites.

This time, I will introduce how to use your favorite fonts used in Windows on your own website to give it a little personality!

*Be sure to check the license of the font you use! *

What to prepare

First, install free software called Woff Converter to convert Windows fonts to web fonts.
Please download from the site below and run "woffconv230.msi".
There are not many items to select, so just agree to the terms of use and select the installation location.

Window company Woff converter (external link)

Find font files on Windows

Find the free fonts you have installed on Windows.
The font file is located in
Control Panel Desktop Customization Fonts (For Windows 10) Just type this into the address bar of Explorer and you're good to go!

You can move to the location of the font file by entering the above path in the address bar of Explorer, so
let's select the desired font from this this time.

Try converting fonts with Woff converter

Once the font file is found, it's time to convert it to a font file "woff" for web use.
Start up the ``woff converter'' you installed earlier, and
drag and drop the font file you selected earlier into the ``File before conversion'' text box.

After conversion, the file name will be automatically determined based on the file before conversion without any input.
You can also set only the output destination folder.

Then check "Create EOT file".
Please select other checks as appropriate depending on the purpose.

Once you've done this, click "Start Converting"!

A ``Specify font'' dialog box will appear, so select the one that suits your purpose.

If the file generation is successful, " Conversion completed successfully " will be displayed!

Load the created font with CSS

Finally, let's load the font file created with CSS and actually reflect it on the website.

First, upload the three files you created earlier, "〇〇.woff," "〇〇.eot," and "〇〇.ttf" to the server.
* "〇〇" is the name specified when creating the font, or the original font name if automatically generated.

Once uploaded, please load the font file using the CSS below.

@font-face { font-family: "myFont";w src: url("[Upload destination path]/〇〇.woff") format('woff'), url("[Upload destination path]/〇 〇.eot") format('eot'), url("[Upload destination path]/〇〇.ttf") format('truetype'); } .myFont{font-family: "myFont";}

*Please change the "〇〇" part of the file name as appropriate.

The font file you created is now ready to use!
All you have to do now is use the font file loaded within the HTML.

<div class="myFont">Text for which you want to change the font</div>

This is what it looks like when actually adapted to this blog!

summary

How was it?

By using this method, you can differentiate your site with a little effort!
In addition, if you apply it, you can load personal name characters created on your PC as a custom character font, so
you really want to use custom characters on your system! We can also help you when you need it!

See you soon!

If you found this article helpful , please give it a like!

0

Loading...

0

1,221