ゆるく学ぶWebフォント@フォントお姉さん

2019年12月1日、さくらクラブJavaScriptプログラミングもくもく勉強会で使用したスライドです。

[スライド内で紹介したサイトURL]

・食パンが美味しそうな豊中市のカフェ
https://csterrace.com/

・和歌山の工務店
https://www.asairyo.com/

・千葉県浦安市のこども歯科
https://nanairokodomo.com/

・Google Fonts(無料)のおすすめ欧文フォント
https://font-friends.com/fonts/index.html

Transcript

1. ΏΔֶ͘Ϳ8FCϑΥϯτ
   CZϑΥϯτ͓࢞͞Μ
2. ࣗݾ঺հ ·Γ
   ϑΥϯτ͓࢞͞Μ˞ࣗশ ೥݄ɺେࡕࢢ಺ͷ8FC੍࡞ձࣾʹస৬ɻσβΠφʔŋίʔμʔɻ
   Ұ೥ޙɺ8FCܥͷηϛφʔʹࢀՃͨ͠ࡍɺʮϑΥϯτ͓͡͞ΜʯͷଘࡏΛ஌Γ
   ϑΥϯτʹڵຯΛ࣋ͪ࢝ΊΔɻ
   ͔ͦ͜ΒϑΥϯτʹؔΘΔษڧձ΍ΠϕϯτʹੵۃతʹࢀՃ͢ΔΑ͏ʹͳΓɺ
   ʮϑΥϯτ͓࢞͞ΜʯΛ໊৐Γ͸͡ΊΔɻ
   
3. 8FCϑΥϯτͱ͸ʁ
4. 8FCϑΥϯτͱ͸ʁ Πϯλʔωοτ্ʹ͋ΔϑΥϯτϑΝΠϧΛ
   ݺͼग़ͯ͠8FCϖʔδʹදࣔ͢Δٕज़ɻ
5. 8FCϑΥϯτͱ͸ʁ ͜Ε·Ͱ ੍࡞ଆ͕ࢦఆͨ͠ϑΥϯτ͕Ϣʔβʔͷ
   σόΠεʹೖ͍ͬͯͳ͚Ε͹ผͷϑΥϯτ͕දࣔ͞Ε͍ͯͨɻ
   body { font-family: 'YuGothic','Hiragino Kaku Gothic ProN’, 'ώϥΪϊ֯ΰ ProN W6’,'ϝΠϦΦ', 'Meiryo','̢̨ ΰγοΫ’,sans-serif; } ͋ ͋ ͋
6. 8FCϑΥϯτͱ͸ʁ 8FCϑΥϯτͷಋೖʹΑͬͯ ͲͷσόΠεͰ΋੍࡞ଆ͕ҙਤͨ͠௨ΓͷϑΥϯτͰ
   දࣔͤ͞Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳͬͨɻ
   body { font-family: 'FOT-ͭ͹Ί Std R'; } ͋ ͋ ͋
7. 8FCϑΥϯτͷϝϦοτ
8. 8FCϑΥϯτͷϝϦοτ ⁞
   දݱͷ෯͕޿͕Δɻ
   ɹ
   ˠαΠτͷҹ৅Λ؆୯ʹม͑ΒΕΔɻ
    
   ࢖͍͍ͨϑΥϯτΛը૾Խ͠ͳ͍͍ͯ͘ɻ
   ɹ
   ˠमਖ਼ָ͕ɻ
   ⁠
   ςΩετͳͷͰଟݴޠରԠ͠΍͍͢ɻ
9. 8FCϑΥϯτ࢖༻ࣄྫ
10. 8FCϑΥϯτ࢖༻ࣄྫ
    
    ৯ύϯ͕ඒຯͦ͠͏ͳ๛தࢢͷΧϑΣ
    IUUQTDTUFSSBDFDPN
    ˠ࢖༻ϑΥϯτɿPlayfair Displayʢ(PPHMF
    'POUTʣ
    
    
    ࿨Վࢁͷ޻຿ళ
    IUUQTXXXBTBJSZPDPN
    ˠ࢖༻ϑΥϯτɿJosefin Sans / Crimson Text ʢ(PPHMF
    'POUTʣ
    
    
    ઍ༿ݝӜ҆ࢢͷ͜Ͳ΋ࣃՊ
    IUUQTOBOBJSPLPEPNPDPN
    ˠ࢖༻ϑΥϯτɿBrandon Grotesqueʢ"EPCF
    'POUTʣ
    
11. ͓͢͢ΊϑΥϯτ
12. ͓͢͢ΊϑΥϯτ (PPHMF
    'POUT ແྉ ͷ͓͢͢ΊԤจϑΥϯτ
    IUUQTGPOUGSJFOETDPNGPOUTJOEFYIUNM
    
13. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ