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.
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
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.
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
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