[Osaka/Yokohama/Tokushima] Looking for infrastructure/server side engineers!

[Osaka/Yokohama/Tokushima] Looking for infrastructure/server side engineers!

[Deployed by over 500 companies] AWS construction, operation, maintenance, and monitoring services

[Deployed by over 500 companies] AWS construction, operation, maintenance, and monitoring services

[Successor to CentOS] AlmaLinux OS server construction/migration service

[Successor to CentOS] AlmaLinux OS server construction/migration service

[For WordPress only] Cloud server “Web Speed”

[For WordPress only] Cloud server “Web Speed”

[Cheap] Website security automatic diagnosis “Quick Scanner”

[Cheap] Website security automatic diagnosis “Quick Scanner”

[Reservation system development] EDISONE customization development service

[Reservation system development] EDISONE customization development service

[Registration of 100 URLs is 0 yen] Website monitoring service “Appmill”

[Registration of 100 URLs is 0 yen] Website monitoring service “Appmill”

[Compatible with over 200 countries] Global eSIM “Beyond SIM”

[Compatible with over 200 countries] Global eSIM “Beyond SIM”

[If you are traveling, business trip, or stationed in China] Chinese SIM service “Choco SIM”

[If you are traveling, business trip, or stationed in China] Chinese SIM service “Choco SIM”

[Global exclusive service] Beyond's MSP in North America and China

[Global exclusive service] Beyond's MSP in North America and China

[YouTube] Beyond official channel “Biyomaru Channel”

[YouTube] Beyond official channel “Biyomaru Channel”

Use your favorite fonts on your own website!

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.

Untitled

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.

Untitled

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.


Untitled 2If 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!
example

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 votes, average: 0.00 / 10
1,230
X facebook Hatena Bookmark pocket
[2025.6.30 Amazon Linux 2 support ended] Amazon Linux server migration solution

[2025.6.30 Amazon Linux 2 support ended] Amazon Linux server migration solution

The person who wrote this article

About the author