Hallo Leute, ich hab jetzt hier schon einige Beiträge zu dem Thema gesehn, doch werde ich nicht schlau raus. Ich habe eine eigene Schrift "Archive" in den Formaten ttf, otf, svg, woff, woff2 und eot. (Ohne Bezeichnungen wie "Regular" oder "700" etc.) Diese möchte ich gerne in die Webseite integrieren, sodass jedes Mal wenn sie angezeigt werden soll, sie in jedem Browser und auf jedem Gerät ohne Probleme angezeigt wird. Ich habe schon verschiedene @font-face-Beschreibungen ausgeführt und hab so langsam den Überblick verloren, welche ich schon alles ausprobiert hab. Gibt es nicht eine einfache Anleitung dafür, wie man es schafft seine eigene Font auf der Homepage zu installieren? Muss ich den @font-face-Code ins Style-Edit-css schreiben oder doch in eine extra seperate css-Datei ? Und wie spreche ich diese dann im <head> an ? Vielen Dank Leute Hier noch ein aktueller Code von mir, (der natürlich auch nicht klappt): Code: @font-face { font-family: 'Archive'; font-style: normal; font-weight: 700; src: url('assets/fonts/archive/Archive.eot'); src: local('Archive'), local('Archive'), url('assets/fonts/archive/Archive.eot?#iefix') format('embedded-opentype'), url('assets/fonts/archive/Archive.woff2') format('woff2'), url('assets/fonts/archive/Archive.woff') format('woff'), url('assets/fonts/archive/Archive.ttf') format('truetype') url('assets/fonts/archive/Archive.otf') format('opentype'), url('assets/fonts/archive/Archive.svg#Archive') format('svg'); }
Hier ist eine Anleitung für Google Web-Fonts. Die müsste genauso auch für andere Web-Schriften gehen: (Link nur für registrierte Nutzer sichtbar.)
Hey Barbara, wie du an meinem Code-Schnipsel siehst (assets/fonts/ etc.) habe ich es versucht diese Methode auf meine Schrift anzuwenden. Leider ohne Erfolg. Ich habe die Zip-Datei heruntergeladen. Den @font-face-Code in eine eigene css-Datei geschrieben. Diese habe ich archive-font.css genannt und in den Ordner Honeygrid/usermod/css gelegt. Die Schrift-Dateien (Archive.ttf, Archive.otf, Archive.woff, Archive.woff2 etc.) habe ich in den Ordner /assets/fonts/archive gelegt. Noch dazu habe ich im Modul head.html versucht die eigene Css anzusprechen mit: Code: {block name="module_head"} <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" {$content_data.HTML_PARAMS}> {block name="module_head_head"} <head> {block name="module_head_head_license_comment"} {* The following copyright announcement is in compliance to section 2c of the GNU General Public License, and thus can not be removed, or can only be modified appropriately. Please leave this comment intact together with the following copyright announcement. *} <!-- ========================================================= Shopsoftware by Gambio GmbH (c) 2005-2018 [www.gambio.de] ========================================================= Gambio GmbH offers you highly scalable E-Commerce-Solutions and Services. The Shopsoftware is redistributable under the GNU General Public License (Version 2) [http://www.gnu.org/licenses/gpl-2.0.html]. based on: E-Commerce Engine Copyright (c) 2006 xt:Commerce, created by Mario Zanier & Guido Winger and licensed under GNU/GPL. Information and contribution at http://www.xt-commerce.com ========================================================= Please visit our website: www.gambio.de ========================================================= --> {/block} {block name="module_head_head_additional_html_array_first"} {$content_data.additional_html_array.head.first} {/block} {block name="module_head_head_viewport_meta"} <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> {/block} {block name="module_head_head_additional_html_array_top"} {$content_data.additional_html_array.head.top} {/block} {* Configuration of automatic hyphenation polyfill *} {block name="module_head_head_hyphenopoly_configuration"} {if $content_data.hyphenopolyLanguage && $content_data.hyphenopolyLoader} <script> var Hyphenopoly = { require: { "{$content_data.hyphenopolyLanguage}": "FORCEHYPHENOPOLY" }, paths: { patterndir: "{$content_data.BASE_URL}JSEngine/build/vendor/hyphenopoly/patterns/", maindir: "{$content_data.BASE_URL}JSEngine/build/vendor/hyphenopoly/" }, setup: { timeout: 1000, classnames: { "title": {}, "product-url": {}, "hyphenate": {}, } } }; {$content_data.hyphenopolyLoader} </script> {/if} {/block} {block name="module_head_head_base"} <base href="{$content_data.BASE_URL}" /> {/block} {block name="module_head_head_favicon_if"} {if $content_data.FAVICON} {block name="module_head_head_favicon"} <link rel="shortcut icon" href="{$content_data.FAVICON}" type="image/x-icon" /> {/block} {/if} {/block} {block name="module_head_head_favicon_ipad_if"} {if $content_data.FAVICON_IPAD} {block name="module_head_head_favicon_ipad"} <link rel="apple-touch-icon" href="{$content_data.FAVICON_IPAD}" /> {/block} {/if} {/block} {block name="module_head_head_inline_css_if"} {if $content_data.MAIN_CSS_INLINE} {block name="module_head_head_inline_css"} <style>{$content_data.MAIN_CSS_INLINE}</style> {/block} {else} {block name="module_head_head_css_include"} <link id="main-css" type="text/css" rel="stylesheet" href="{if $content_data.MAIN_CSS}{$tpl_path}{$content_data.MAIN_CSS}{else}{$tpl_path}{$content_data.CSS_FILE}?{$content_data.CSS_PARAMS}{/if}" /> <link id="main-css" type="text/css" rel="stylesheet" href="/templates/Honeygrid/usermod/css/archive-font.css" /> {/block} {/if} {/block} {block name="module_head_head_additional_html_array_bottom"} {$content_data.additional_html_array.head.bottom} {/block} {block name="module_head_head_fixed_header_assign"} {assign var="fixedHeader" value={template_setting name="gx-header-fixed"}} {/block} {block name="module_head_head_debug_bar_header"} {if $content_data.debug_bar} {$content_data.debug_bar_header_content nofilter} {/if} {/block} </head> {/block} {block name="module_head_body"} <body class="{page_id}" data-gambio-namespace="{$content_data.BASE_URL}{$tpl_path}assets/javascript/engine" data-jse-namespace="{$content_data.BASE_URL}JSEngine/build" data-gambio-controller="initialize" data-gambio-widget="input_number responsive_image_loader transitions {if $fixedHeader}header {/if}image_maps modal history dropdown core_workarounds anchor" data-input_number-separator="{$content_data.numberSeparator}" {$content_data.additional_html_array.body.params}> {block name="module_head_body_additional_html"} {$content_data.additional_html_array.body.top} {/block} {/block} {/block} Aber alles leider ohne Erfolg.
Sorry, ich habe den Link für einen anderen gehalten. Ich habe nun aber alles so gemacht, wie es in deinem Link steht. Es klappt immer noch nicht. Irgendwas mach ich immer noch falsch.
Ich bin immer noch nicht weiter. Es funktioniert anscheinend nur der "local"-Befehl. Die Schrift ist auf meinem Rechner installiert. Gehe ich über einen anderen Rechner auf die Homepage erscheint die Schriftart leider immer noch nicht ...
Die Manipulation der head.html ist grober Unfug, CSS wenn dann im Styleedit ins eigene CSS kopieren. Macht doch 0 Spass bei Updates hinter Manipulation der head.html hinterherzupflegen. Absolute URL Pfade zur Font angeben.
Genau, aber wenn das ein Liveshop ist gleich mit "https://", die Vokabel "http://" verbietet sich in Liveshops völlig.
Und die @font-face Ansprache nur ins Style-Edit-CSS oder auch in eigene CSS-Dateien unter usermod/css ?
Es hat endlich geklappt !! :O 1. @font-face Ansprache nur im Style-Edit-CSS 2. Absolute Links benutzen in der @font-face Ansprache Dazu habe ich, weil meine runde Schriftart pixelig angezeigt wurde, noch folgenden Tag dem Element hinzugefügt: Code: -webkit-text-stroke: 0.5px !important; Vielen Dank an Euch Beide