Personal application production 2 Introduction of WEB fonts

Today's implementation

① controller users tweet ② model user(devise) tweet ③ Introduction of haml scss ④ Create view teww t index

Introduction of web fonts Google Web Fonts

This time I used Google Web Fonts to make fashionable fonts. study-support.png

Introduction method

This time, I will describe the introduction method with scss.

1 Find the font you want to use

Find the font you want to use from google fonts. Google Web Fonts google-fonts.png Tab in the upper right

link href = "https://fonts.googleapis.com/css2?family=Anton&display=swap" rel = "copy the stylesheet URL.

2 Load into SCSS

app/assets/stylesheets/application.scss


@import url(https://fonts.googleapis.com/css?family=Anton);

Now you can use Anton with fontfamily in SCSS.

3 Used for SCSS.

app/assets/stylesheets/modules/_tweets.scss


font-family: 'Anton', sans-serif;

Then, the Anton font is applied to the study-support below. study-support.png

Caution

Most of the above site google fonts do not support Japanese, so Japanese is often not applied. I wasted about 40 minutes without noticing that only Japanese was applied lol

This time I loaded it in application.scss, but there are other installation methods.

Reference site

Let's use Google Web Fonts

Today's idea

Embed a video in the posting function

Include your own output video of what you learned today about the posting function (output)

Background

Nowadays, it seems that there are few videos that you can learn by watching videos such as youtube and output on Twitter. As you can guess from the flow of the times, SNS is expressed in characters ➯ characters + photos (Instagram) ➯ videos (individual transmission by youtube), and I feel that the times are in videos. Based on the fact that it is possible to send more personally than now, in the personal application study-support, I would like to be able to output by video to the posting function. The best study is to tell people something. I feel that the option of video is to broaden the range of output.

Recommended Posts

Personal application production 2 Introduction of WEB fonts
Personal application production diary 3
Role of JSP in Web application [Java]
Personal application creation # 2
Introduction of pay.jp
Personal application creation # 1
[Personal application creation] Information management application production 16th day
[Personal application creation] Information management application production 14th day
Roughly the flow of web application development with Rails.
Personal application creation term
Introduction of Docker --Part 1--
[Rails] Introduction of PAY.JP
Personal app production diary
Personal application development diary # 2
Web application test automation
Personal application development diary # 3
Introduction of user authentication
[Personal application work memo] Move the location of the follow button
[Personal development] 8 things I did after publishing the web application
Introduction purpose of ActiveHash and simple flow to application implementation