Как установить свой шрифт на странице?

Если нужного шрифта нет в стандартном наборе, можно установить его с сайта Google Fonts.

Для этого нам нужен виджет “HTML-код”. Добавляем его на страницу. Переходим в меню “Дублировать” и нажимаем “Импорт”. Вставляем код и нажимаем “Сохранить”.

Код

{"className":"WidgetMetaHtml","data":{"style":{"handlers":"style","vals":{"bgType":"clear","bgImage":{"pack":"bg-tech","file":"//s.platformalp.ru/img/bg-tech/1.jpg","color":[0.55023297764639,1,0.5],"size":[1600,1046],"datamix":{"img":"3.0"}},"bgImage_Blur":0,"bgImage_Attach":false,"bgImage_Size":"cover","bgImage_Repeat":"repeat","bgImage_Valign":"center","bgImage_Halign":"center","bgVideo_Source":"youtube","bgVideo_Youtube":"http://www.youtube.com/watch?v=3oem-M2tQU4","bgVideo_YoutubeImageSource":"youtube","bgVideo_YoutubeImage":{"file":"http://img.youtube.com/vi/3oem-M2tQU4/maxresdefault.jpg","size":[1920,1080],"pack":"users","datamix":{"img":"3.0"}},"bgVideo_Mp4":"//s.platformalp.ru/bgvideo/island.mp4","bgVideo_Webm":"//s.platformalp.ru/bgvideo/island.webm","bgVideo_Ogv":"//s.platformalp.ru/bgvideo/island.ogv","bgVideo_DirectImage":{"file":"//s.platformalp.ru/bgvideo/island.jpg","size":[1280,720],"pack":"users","datamix":{"img":"3.0"}},"bgColor":{"from":"global","global":{"id":0},"datamix":{"color":"3.0"},"router":"color"},"bgColor_Alpha":0.25,"bgColor_Bright":-0.34,"bgBright":-0.5,"bgGradientDirection":"to bottom","bgGradientColor1":{"from":"global","global":{"id":0},"datamix":{"color":"3.0"},"router":"color"},"bgGradientColor1_Alpha":0.8,"bgGradientColor2":{"from":"global","global":{"id":0},"datamix":{"color":"3.0"},"router":"color"},"bgGradientColor2_Alpha":0.2,"padTop":5,"padBottom":5,"padLeft":5,"padRight":5,"borderWidth":3,"borderRadius":0,"borderStyle":"none","borderColor":{"from":"parent","parent":{"type":"frontcolor"},"datamix":{"color":"3.0"},"router":"color"},"shadow":false,"shadowInset":false,"shadowX":0,"shadowY":2,"shadowBlur":5,"shadowScale":0,"shadowColor":{"from":"self","data":[0,0,0],"datamix":{"color":"3.0"},"router":"color"},"shadowAlpha":0.5,"nodewow":false,"nodewowType":"bounceIn","nodewowDelay":0,"id":"","classes":"","hidexs":false,"hidesm":false,"hidemd":false,"hidelg":false,"usePadTopXs":false,"padTopXs":5,"usePadBottomXs":false,"padBottomXs":5,"usePadLeftXs":false,"padLeftXs":5,"usePadRightXs":false,"padRightXs":5,"usePadTopSm":false,"padTopSm":5,"usePadBottomSm":false,"padBottomSm":5,"usePadLeftSm":false,"padLeftSm":5,"usePadRightSm":false,"padRightSm":5,"usePadTopMd":false,"padTopMd":5,"usePadBottomMd":false,"padBottomMd":5,"usePadLeftMd":false,"padLeftMd":5,"usePadRightMd":false,"padRightMd":5}},"datamix":{"nodebg":"3.0","widgetpaddings":"3.0","widgetborders":"3.0","widgetshadow":"3.0","nodewow":"3.0","widgetparameters":"3.0","widgetadaptive":"3.0","metahtml":"3.0"},"settings":{"handlers":"settings","vals":{"name":"HTML виджет","html":"<div class=\"text1\">[[cont]]</div>\n","css":"@import url('https://fonts.googleapis.com/css?family=<%= fontname %>');\n\n.text1 {\nfont-family: '<%= fontname %>', cursive;\n}\n","encapsulation":true,"components":[{"name":"cont","type":"cont"}],"variables":[{"macros":"fontname","name":"Название шрифта","type":"string","value":"Arial"}]},"tabs":{"primary":"metahtml","main__soft":"main__soft_main","main__hard":"main__hard_element","metahtml__soft":"metahtml__soft_main","metahtml__hard":"metahtml__hard_css"},"toggles":{"main":"soft","metahtml":"soft"}},"components":{"cont":{"sources":[{"className":"WidgetText","data":{"style":{"handlers":"style","vals":{"bgType":"clear","bgImage":{"pack":"bg-tech","file":"//s.platformalp.ru/img/bg-tech/1.jpg","color":[0.5502329776463939,1,0.5],"size":[1600,1046],"datamix":{"img":"3.0"}},"bgImage_Blur":0,"bgImage_Attach":false,"bgImage_Size":"cover","bgImage_Repeat":"repeat","bgImage_Valign":"center","bgImage_Halign":"center","bgVideo_Source":"youtube","bgVideo_Youtube":"http://www.youtube.com/watch?v=3oem-M2tQU4","bgVideo_YoutubeImageSource":"youtube","bgVideo_YoutubeImage":{"file":"http://img.youtube.com/vi/3oem-M2tQU4/maxresdefault.jpg","size":[1920,1080],"pack":"users","datamix":{"img":"3.0"}},"bgVideo_Mp4":"//s.platformalp.ru/bgvideo/island.mp4","bgVideo_Webm":"//s.platformalp.ru/bgvideo/island.webm","bgVideo_Ogv":"//s.platformalp.ru/bgvideo/island.ogv","bgVideo_DirectImage":{"file":"//s.platformalp.ru/bgvideo/island.jpg","size":[1280,720],"pack":"users","datamix":{"img":"3.0"}},"bgColor":{"from":"global","global":{"id":0},"datamix":{"color":"3.0"},"router":"color"},"bgColor_Alpha":0.25,"bgColor_Bright":0,"bgBright":-0.5,"bgGradientDirection":"to bottom","bgGradientColor1":{"from":"global","global":{"id":0},"datamix":{"color":"3.0"},"router":"color"},"bgGradientColor1_Alpha":0.8,"bgGradientColor2":{"from":"global","global":{"id":0},"datamix":{"color":"3.0"},"router":"color"},"bgGradientColor2_Alpha":0.2,"padTop":5,"padBottom":5,"padLeft":5,"padRight":5,"borderWidth":3,"borderRadius":0,"borderStyle":"none","borderColor":{"from":"parent","parent":{"type":"frontcolor"},"datamix":{"color":"3.0"},"router":"color"},"shadow":false,"shadowInset":false,"shadowX":0,"shadowY":2,"shadowBlur":5,"shadowScale":0,"shadowColor":{"from":"self","data":[0,0,0],"datamix":{"color":"3.0"},"router":"color"},"shadowAlpha":0.5,"nodewow":false,"nodewowType":"bounceIn","nodewowDelay":0,"id":"","classes":"","hidexs":false,"hidesm":false,"hidemd":false,"hidelg":false,"usePadTopXs":false,"padTopXs":5,"usePadBottomXs":false,"padBottomXs":5,"usePadLeftXs":false,"padLeftXs":5,"usePadRightXs":false,"padRightXs":5,"usePadTopSm":false,"padTopSm":5,"usePadBottomSm":false,"padBottomSm":5,"usePadLeftSm":false,"padLeftSm":5,"usePadRightSm":false,"padRightSm":5,"usePadTopMd":false,"padTopMd":5,"usePadBottomMd":false,"padBottomMd":5,"usePadLeftMd":false,"padLeftMd":5,"usePadRightMd":false,"padRightMd":5},"tabs":{"primary":"presets","bg":"bg_image","bg_place__soft":"bg_place__soft_main","bg_place__hard":"bg_place__hard_main","shadow__soft":"shadow__soft_main","shadow__hard":"shadow__hard_main","paddings__soft":"paddings__soft_main","paddings__hard":"paddings__hard_main"},"toggles":{"bg_place":"soft","shadow":"soft","paddings":"soft"}},"datamix":{"nodebg":"3.0","widgetpaddings":"3.0","widgetborders":"3.0","widgetshadow":"3.0","nodewow":"3.0","widgetparameters":"3.0","widgetadaptive":"3.0"},"settings":{"handlers":"settings","vals":{"tag":"p","font":"font-text","role":"none","forceXs":true,"forceSm":false,"xsFontScale":100,"smFontScale":100,"mdFontScale":100,"fullwidth":false,"line":"none","lineWidth":4,"linePaddings":10,"linePadding":10,"lineLength":40,"lineThickness":4,"color":{"from":"contrast","contrast":{"type":"frontcolor"},"parent":{"type":"frontcolor"},"datamix":{"color":"3.0"}},"color_Alpha":0.5,"opacity":1},"tabs":{"primary":"role"}},"text":{"html":"<p>Измените этот текст</p>","datamix":{"html":"3.0"}}},"multilandings":[],"locked":false,"locks":0,"variants":[],"redactor":"3.0"}],"datamix":{"cont":"3.0"},"tplname":"cont"}},"templates":{"cont":{"sources":[],"datamix":{"cont":"3.0"},"tplname":"cont"},"text":{"html":"<p>Редактируемый текст</p>","datamix":{"html":"3.0"},"tplname":"text"},"icon":{"handlers":"rawsvgicon","vals":{"src":{"file":"//s.platformalp.ru/img/icons-simple-thin/49--black.png","pack":"icons-simple-thin","size":[256,256],"svg":"<style type=\"text/css\"><![CDATA[ .st0{fill:none;stroke:#231F20;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} ]]></style><polygon class=\"st0\" points=\"30.001,2.421 38.965,20.576 59,23.49 44.499,37.622 47.922,57.579 30.001,48.156 12.076,57.579 15.5,37.622 1,23.49 21.041,20.576 \"/>","datamix":{"img":"3.0"}}},"datamix":{"rawsvgicon":"3.0"},"tplname":"icon"}}},"multilandings":[],"locked":false,"locks":0,"variants":[],"redactor":"3.0"}

Переносим нужный текст внутрь виджета “HTML-код”

Переходим на сайт Google Fonts, выбираем нужный шрифт, запоминаем или копируем его название. Очень важно, чтобы шрифт был на том языке, на котором написан текст: если текст на русском, выбираем “Languages – Cyrillic”. Прописываем название шрифта в настройках виджета “HTML-код” в разделе “Простые настройки”. Готово! Мы подключили нужный шрифт и можем редактировать текст как обычный.

Читайте другие статьи о настройке сайта в рубрике #сделайлучше.

Базовые статьи о редакторе Платформы – здесь.