Basic Font Settings Guide for Web Site Development

I wonder how you set up the font on the website.

Apply font only to body {} tags,

Do you use the method of loading Google Web Font?

@font-face{
    font-family:"Nanum Gothic";
    src:url('/fonts/NanumGothic.eot');
    src:url('/fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),
    url('/fonts/NanumGothic.woff') format('woff'),
    url('/fonts/NanumGothic.ttf') format('truetype');
    url('/fonts/NanumGothic.svg#NanumGothic') format('svg')
    src:local(※), url('/fonts/NanumGothic.woff') format('woff');
}

They say there's a way to call it up from their own server, but they use this.

I'd like to compare it with the font applied while the website is developed to some extent.

The font size is the same. There's a unit called Rem.

I'd like to specify the basic font and size, and apply a different font or size only when necessary.

How is developing favorable for long-term maintenance and comfortable in terms of speed??

web node.js css font

2022-09-21 20:28

2 Answers

If you want to set up your own web font, the blog below is helpful. Keep that in mind. https://milooy.wordpress.com/2015/08/21/web-font-tutorial/

2022-09-21 20:28

There are many ways to set it up yourself. If you search on Google, it comes out a lot, and I'll say it assuming that you use bootstrap for easy understanding.

The easiest way to manage typefaces on a website is to use web typefaces and system typefaces. If you don't have a fancy design, it may not be too much to create a service just by using the basic font. (If you have a unique design, you should use a separate typeface.) Web typefaces can be found through google fonts and Google. Apply adds the code below to css. An example is Spokha Hans and Roboto typeface.

/*English language*/
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
/*Hangul font*/
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);

For more information on Korean web fonts or web fonts, see blog.

Also, the reason why we recommend using system typeface is that applying typeface to small characters below a certain size in window OS makes it less readable, so we want to use system typeface supported by rolling or OS/browser for text or smaller characters (h4.

In most cases, body, h1~h6, and p tags are tags that need to be influenced by typeface. So you can apply typeface to these csss. See the topic typography in the bootstrap.

Therefore, first apply typeface to body of css.

body {
  "roboto", "Helvetica Neue", "Helvetica", "Arial", "Clear Gothic", "malgun Gothic", "Standing", Dotum, Sans-serif;
}

Second, apply the required typeface to h1~h6 and p. For example, if you want to use only h1, h2, and h3, only the class is designated separately as below. (In css, h1, h2, and h3 must be located under body.)

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-family: "roboto", "Helvetica Neue", Helvetica, Arial, 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Clear Gothic', malgun Gothic, "Rise", Dotum, Sans-serif;
}

If you are using bootstrap v4 (alpha), the unit will already be rem. I recommend you to change it little by little and decide the size. To learn more about rem, you can easily get information through Google.

2022-09-21 20:28

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656